Try using Firefox with the Firebug add-on for this kind of CSS work.
http://getfirebug.com/
How are you inserting the image? Are you inserting the code yourself? Do you know where this is?
<img src="http://demo.equinesites.co.uk/wp-content/uploads/2012/06/ES-Logo-SQUARE-for-demo1.png">
That image has no id or class associated with it to manipulate via css. You will need to either manually add a class or an id, or simply apply some inline css.
So, can you access that bit of code where ever you are inserting the image?
Is that not the same as the ‘Inspect Element’ thing that I have been using with Chrome? It lets me edit the css live or is it different? Thanks
Hi Josh – the image is inserted as part of the theme, where I put the URL in the theme options and the logo comes up. It can either be the standard text or a logo file.
I can add padding to the URL have pasted when using the chrome ‘inspect element’ but can’t find it in CSS.
They are similar. What esmi is suggesting is that you can use Firebug (or Chrome’s equal) to find the class or id, and also the location of the stylesheet used to generate the code.
However, this will NOT help you if you don’t have a class or id associated with the element you are trying to manipulate. Hence, my explanation above.
Okay, so change the url from what you have, to this:
<img style="margin-top:50px;" src="http://demo.equinesites.co.uk/wp-content/uploads/2012/06/ES-Logo-SQUARE-for-demo1.png">
Unfortunately this is the problem I am having, the URL isn’t anywhere in my CSS…and I don’t know if it has a class or ID. In the chrome live thing I can easily change it to what you have suggested above, but then can’t then find it within the editor section of my dashboard.
Sorry, as you can guess I am new to this! Your help is definitely appreciated!
Okay.
That logo didn’t automatically come with your theme. So you had to “add” it somehow.
How did you add it? Did you manually insert a link? Or is there something in your theme which had you browse to the image to be uploaded?
The theme comes with some ‘Theme Options’ – here it roughly says that I should put the URL of one of my images in their logo box…then save.
This may help (or might not!)…It is the part from the functions which I think generates the rule:
array( "name" => "Logo Settings","type" => "title"),
array( "type" => "closetitle"),
array( "type" => "open"),
array( "name" => "Logo Options",
"desc" => "Customise your blog logo",
"id" => $shortname."_logo",
"type" => "select",
"std" => "0",
"options" => array("Text Logo - Use Default Blog Settings","Custom Image - Use setting below")),
array( "name" => "Custom Logo",
"desc" => "If you choose Custom Image as your logo, please state the image's URL.",
"id" => $shortname."_customlogo",
"type" => "text",
"std" => ""),
array( "type" => "close"),'
Why the logo isn’t fitting nicely where it is supposed to, is because I changed the header height…I have managed to change everything else to fit this height just not the logo.
Thanks
The theme comes with some ‘Theme Options’ – here it roughly says that I should put the URL of one of my images in their logo box…then save.
Okay, so try putting this into that option box:
<img style="margin-top:50px;" src="http://demo.equinesites.co.uk/wp-content/uploads/2012/06/ES-Logo-SQUARE-for-demo1.png">
No I am afraid it didn’t like that – it would just disappear after I had saved it and come up with a broken link icon on the actual website.
If I can’t find a solution I can make the actual image have more space above but that isn’t really very tidy.
Yeah, they might be running a validation on that input and stripping out anything but the “src” atrribute.
I’d really have to see how they are processing that option box. What’s strange is that they didn’t wrap this in a class or id… basically “forcing” the end user with only one positioning option.
I would go along with your suggestion and just create more space above the image. Definitely not customizable friendly, but as long as you won’t be changing positioning in your header anymore, you should be okay.
What theme is it you are using?
Oh well we tried – thank you for your help.
The theme is Greenfield. It is strange because I was able to move the default text but when I put in the custom logo it went to the top.
A final stab in the dark, I just found this in the header PHP, which links with the code I pasted above:
<div id="header">
<?php
$greenfield_logo = get_option('greenfield_logo');
$greenfield_customlogo = get_option('greenfield_customlogo');
if ($greenfield_logo == "Custom Image - Use setting below" && $greenfield_customlogo != '') { ?>
<a href="<?php echo get_option('home'); ?>/"><img src="<?php echo $greenfield_customlogo; ?>" /></a>
<?php } else { ?>
<div id="headertext">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<h4><?php bloginfo('description'); ?></h4>
</div>
<?php }?>
If it doesn’t help at all, then thanks anyway 🙂
Okay, try putting this into the option box:
http://demo.equinesites.co.uk/wp-content/uploads/2012/06/ES-Logo-SQUARE-for-demo1.png" style="margin-top:50px;
Insert it EXACTLY like that and don’t fix the code problems. We are going to try and “trick” the theme.
Nope sorry, doesn’t work 🙁 but thank you
