stevepedwards.com/DebianAdmin linux mint IT admin tips info

Basic Editing of Your Worpress Style.CSS Sheet

WARNING - You are strongly advised NOT to edit your production server site in real time! Apart from the obvious error risks and client disruption, you may lock up your site or break it in some other way leaving it unavailable.

If you run a wordpress site you should have a full copy of your site files AND database anyway by using any cPanel backup options your provider gives, or a WP plugin.

You can follow the Posts on this site to backup and run a copy locally on a spare PC. That way you can properly test any changes before uploading back to the main site.

This Post uses that test method for these examples on my local mysql server for changing some basic features like BG colours, font colours, types, sizes and width.

Backup the style.css file remotely and store it in another folder so if you really mess up you have the original. My file is in the:

DebianAdmin/wp-content/themes/galaxy directory on my site and local version e.g.:

galaxystylecss.png

Note the permissions of your original - 0644 in my case.

Download a copy of it and work on that copy locally, so you can test any changes before you upload it again.

I use vim locally as it is language code aware, but any word processor will do - Text Editor in linux also shows coloured code too:

editors-1

Using my recently edited site for the examples, the first change required was the main Galaxy theme body font to Courier, and change the size from 12 to 14px as seen below where #000000 is NO pixel light at all for black text:

|------------------------
| =Body
|------------------------
*/
body {
font-family: Courier, Arial, sans-serif;
font-size: 14px;
line-height: 18px;
color: #000000;
background: #daffb3 url(images/galaxy.png) fixed;
}

The next text format change is my main aim and was a bit trial and error in the Skeleton section to widen the main body area for the same 100% browser zoom - make more of the available screen width for my 15" laptop, and spread the text out into the wasted space. The table width is fine at 1248px; compared to the "old" width below, even allowing for smaller res size and img stretching, the text has more space even though it is larger at the new size, but it still does not wrap to the available space - that section of table would need widening also but I cannot find the code.

newwidth.png

021515_0100_backingupan81.png

A first trick I thought useful was to show the different areas that make up the page, as there are at least 5 - header, footer, search widget, Post text area, and Menu side bar etc. - but doesn't work everywhere depending on what is behind - you can delete the "#" before the colour and it can allow transparency for the background fill to show through the area affected. For example, in the .container main area, using vim I can put the cursor under the hash, press x to delete it, shiftQ then :w to write the file, then refresh the browser to find the container area "disappear". The range of colours available between black and white; 000000-ffffff is 16^6 = 16777216 or about 16.8 million.

.container_main {
width: 1248px;
background: daffb3;
margin: 0 auto;
padding: 0;

menuedges.png

Best to just use white ffffff to be sure what area you are editing:

|------------------------
| =Skeleton
|------------------------
*/
.container_main {
width: 1248px;
background: #ffffff;
margin: 0 auto;
padding: 0;
}

main.png

Now you can choose the colour you desire using your newly installed Gpick App from the prior Post, or the picker at w3schools:

http://www.w3schools.com/colors/colors_picker.asp

w3pick.png

Once you have changed the hex code, save the file and check it looks correct. Experiment with all areas that have a colour code assigned, and overall, the best thing to ID an area is to set the hex to white ffffff, save the file and refresh, as for the top menu area code below:

}
#container_primary_menu {
background: #ffffff

top.png

Same for the footer:

}
#container_footer {
background: #CEE0F3;
border-top: solid 1px #ddd;
}

footer.png

}
#container_custom_header {
width: 100%;
padding: 0px 0;
background: #CEE0F3;
border-top: solid 1px #eee;
}

header.png

To fill in the white edges above - the background - remove images from within the WP Dashboard in Appearance, and remove the header image if you want just the text without the Galaxy space image. Change the text colour there also.

The hardest part to compromise was the main Post text width and the menu bar, as I found 1 pixel more than the 174px below pushed the Posts menu bar off the page totally leaving just the main text. I managed to get the search widget right against the table edge with trial and error.

#sidebar-inside {
padding-left: 174px;

search.png

While editing this area, you can search the style.css for the search widget settings, and change the bar colour next to the button. I chose a light blue to break up the green a bit, and highlight it as a specific area.  You can also change the text string BG from default white here, but I don't think it would be so clear where to type.

|------------------------
| =Search Form Widget
|------------------------
*/
.searchform {
width: 278px;
background: #CEE0F3;

}
.searchform input#s {
width: 270px;
border: 0;
padding: 6px 0 6px 6px;
background: #f8f8f8;
color: #000000;

The hardest area to ID in the file was the main text area - as it relates to the current Post shown, but a search of all "white" areas of hex ffffff showed it as in the Type Post section:

|------------------------
| =Type Post
|------------------------
*/
.type-post,
.type-page {
padding: 0px;
margin: 0 0 40px 0;
background: #ffffff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}

typepost.png

The only remaining changes I wish to make is widen the Post Type area so the main text can spread across fully, closer to the Menu edge, without pushing the Menu off. There is no width option for this in that code above, and more complex code here, as there are options for "fluid" text in this area as per WP help pages state, so seems not so straightforward...?

I want to change the galaxy.png text style to Courier also to match, but haven't found that code yet. The text is changed in Dashboard/Appearance/Site Identity.

Once happy the style.css file works, upload it back up to the same directory on your site that you downloaded it from via cPanel, making sure the overwrite existing file option is set, then check it works live.

You may want to consider how your font choice views by default in other browsers too - the text is not as bold and black in Firefox as Chrome. For IE, I don't care...as no one should be using that shit anyway!:
ffoxview.png

Comments are closed.

Post Navigation