Jump to content
Sign in to follow this  
jgbr

firebug v platform pro

Recommended Posts

jgbr

Ok heres some code i've messed around with in firebug: <div class="content-pad" style="padding-top: 0px;"> <div class="banner_container fix banners bannertest"> <div class="banner-area banner_left" style="padding-top: 0px;"> <div style="width:0.1%;" class="banner-text"> <div style="padding: 20px 60px" class="banner-text-pad"> <div class="banner-title"><h2></h2></div> <div class="banner-content"> <!--more--> Now where in the heck in my wordpress install do i find the file to copy that edited code and save it? (i normally open it in dreamweaver and then save it) thanks okEBm.png

Share this post


Link to post
Share on other sites
catrina
Now where in the heck in my wordpress install do i find the file to copy that edited code and save it? (i normally open it in dreamweaver and then save it)
Rather than copying that code and pasting it into any of the files, you can create the CSS instead and place it inside Settings > Custom Code > CSS Rules. For example, if you want to change the styling of banner-text to
width:0.1%
you'll need to add this CSS:
div.banner-text {width:0.1%;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jgbr

see i actually find that more difficult then just copy and pasting what firebug is reporting back. in the above case i want to reduce the content pad to 0 so i put in custom css #div class="content-pad" style="padding-top: 0px;" } is that wrong , because it does not work?

Share this post


Link to post
Share on other sites
catrina

It's easier, but then the results won't come through because it's not in the correct CSS format. Instead of this:

#div class="content-pad" style="padding-top: 0px;"
	}
Use this:
div.content-pad {padding-top: 0px;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jgbr

didnt work i tried this div class="banner-area banner_left" {style="padding-top: 0px;"} once ive cracked custom css , ill have no problems! :)

Share this post


Link to post
Share on other sites
catrina

Instead of adding

div.content-pad {padding-top: 0px;}

to Custom Code > CSS Rules, add it to the base.css file, which you can access when you enable the child theme, PlatformBase (via Appearance > Themes).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jgbr

Which is where I only want to go around the site modifying things in firebug and post it over into the real file, whatevers easyist!

Share this post


Link to post
Share on other sites
catrina

Go to Appearance > Themes and activate PlatformBase. Once it's activated, you can go to Appearance > Editor and the base.css file (the first file you see) is where you can paste add save your edits. The problem with posting directly into the file is that when you upgrade, the changes you made will be lost. If you can remember to back up those changes prior to upgrading, you can add the changes to the appropriate CSS files.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jgbr

So under custom css? of style.css? Lets run through an example: Firebug tells me ive mad this change: <div class="banner-area banner_left" style="padding-top: 0px;"> How do i turn that into code (or what should the code be) for this child base custom code?

Share this post


Link to post
Share on other sites
catrina
<div class="banner-area banner_left" style="padding-top: 0px;">
To transform the code above to appropriate CSS, use this (add it to Custom CSS or the base.css file in the child theme if the change isn't working when you add it to Custom CSS):
div.banner-area {padding-top: 0px;}
You must never add
<div class="banner-area banner_left" style="padding-top: 0px;">

into the Custom CSS or a CSS file.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jgbr

I just did a direct copy and paste job into the style.css of the platform base file and it did nothing. /* ============================== */ /* = Start Your Custom CSS Here = */ /* ============================== */ /* @ CSS corresponding to the hook used in functions.php; adds a stumbleupon icon to branding section */ .icons .stumbleupon {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px 0;} .icons .stumbleupon:hover {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px -22px;} /* @ Pullquote Section */ #pullquote.copy{ background: #f7f7f7 url(images/pullquote.png) no-repeat 15px 15px; padding: 15px 20px 15px 45px; margin-bottom: 1.5em; } #pullquote .thepullquote{font-size: 1.5em;margin-bottom: 5px;line-height: 1.3em;} #pullquote .thecitation{color: #AAA; font-style: italic;padding-left: 15px;} div.banner-area {padding-top: 0px;}

Share this post


Link to post
Share on other sites
catrina
div.banner-area banner_left {padding-top: 0px;} 
^ Remove
banner_left

Also, you can add the other CSS styling that you want to change.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jgbr

Yep no difference this is why id rather pull the code in dreamweaver and chance it manually - i know its time intensive but atleast it always works.

Share this post


Link to post
Share on other sites
catrina

If you want to change the CSS directly in the CSS files within the theme, you can do so but remember to back up those changes before upgrading the theme to avoid losing them.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jgbr

So to be a pain Catrina. Coming full circle to my first question how do i use firebug to hunt down the correct css file (use the one that i took a piccy of)

Share this post


Link to post
Share on other sites
catrina

First you can find the CSS selector (e.g. banner-area) using Firebug. You already know how to get a hold of that, so now all you need to do is find banner-area in your CSS files (by searching the theme folder - looking specifically for .CSS files that contain banner-area). When you do that, you can open that CSS file, find the banner-area selector, and change the CSS for it.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jgbr

that got me completely lost LOL. :( does not firebug tell me where it is?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×