Layouts and Discussion Width

scottybweyy

Is there anyway to widen the discussions on the pages? If so, how can I accomplish this?

vrijvlinder

There are several ways to do this.

http://www.w3schools.com/cssref/pr_dim_width.asp

https://developer.chrome.com/devtools

scottybweyy

Thank you. Still trying to refresh as it's been years since I've dabbled in html.

One point of confusion seems to be knowing which files to inspect and alter. For example there is the custom.css, my theme specific css, then my theme's default.master.tpl

The next I haven't been able to find an element library that details all possible attributes.

Finally, the code is garbled for my theme specific css...any way I can make it more user friendly?

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@media print{*{text-shadow:none!important;color:#000!important;background:transparent!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href)")"}abbr[title]:after{content:" (" attr(title)")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}select{background:#fff!important}.navbar{display:none}.table td,.table th,table td,table th{background-color:#fff!important}.btn>.caret,.dropup>.btn>.caret,.btn>.SpDropdownHandle,.dropup>.btn>.SpDropdownHandle{border-top-color:#000!important}.label,.Tag,.Note.Closed,.HasNew,.Item .Meta .MItem.Category a,.token-input-token{border:1px solid #000}.table,table{border-collapse:collapse!important}.table-bordered th,.table-bordered td{border:1px solid #ddd!important}}@font-face{font-family:'Glyphicons Halflings';src:url('../fonts/glyphicons-halflings-regular.eot');src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/glyphicons-halflings-regular.woff') format('woff'),url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg')}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-asterisk:before{content:"\2a"}.glyphicon-plus:before{content:"\2b"}.glyphicon-euro:before{content:"\20ac"}.glyphicon-minus:before{content:"\2212"}.glyphicon-cloud:before{content:"\2601"}.glyphicon-envelope:before{content:"\2709"}.glyphicon-pencil:before{content:"\270f"}.glyphicon-glass:before{content:"\e001"}.glyphicon-music:before{content:"\e002"}.glyphicon-search:before{content:"\e003"}.glyphicon-heart:before{content:"\e005"}.glyphicon-star:before{content:"\e006"}.glyphicon-star-empty:before{content:"\e007"}.glyphicon-user:before{content:"\e008"}.glyphicon-film:before{content:"\e009"}.glyphicon-th-large:before{content:"\e010"}.glyphicon-th:before{content:"\e011"}.glyphicon-th-list:before{content:"\e012"}.glyphicon-ok:before{content:"\e013"}.glyphicon-remove:before{content:"\e014"}.glyphicon-zoom-in:before{content:"\e015"}.glyphicon-zoom-out:before{content:"\e016"}.glyphicon-off:before{content:"\e017"}.glyphicon-signal:before{content:"\e018"}.g

vrijvlinder

Ok , I dislike it when the code is in one line... copy the entire code and paste it in the beautifier then copy and paste the nice code back into your file . The custom.css is the file to edit. If it is bootstrap then it would be the css file for the theme you pick. To find the element right click on the element you want to change then select inspect element and see what it's class is and the css rule on it and what line it is on in the file. That is why beautifying it helpful because you can see the line numbers and find it easy in the file.

http://cssbeautify.com/

Then you will have an easier time finding the css to edit.

scottybweyy

Great tip. I ended up using http://codebeautify.org/css-beautify-minify since the .com cutoff my CSS paste.

The at-rules are definitely confusing to me...I eventually added the following in the custom_cerulean.css file. It didn't work when I added the at-rule to the custom.css.

I appreciate your advice and letting me figure it out on my own.

\ @media (min-width:1600px) { .container,.container { width: 1560px; } }

vrijvlinder

@media targets the device so the rule would be for devices of minimum with of 1699px

If you give me a link I can help you more and if you specify what parts you want to change.

hgtonight

If you are working with the bootstrap theme, I highly suggest you use npm to build out the custom CSS file. You add your changes to the bootswatch.less file and then rebuild to generate the custom_cerulean.css file.