Tulimafat
Member
Posted 5 months ago #
Hello again.
I need some help getting a logo next to some text in the header.
Similar to what I have done here: http://www.sabaki.dk/VKS/
This is what I inserted last time in with "Clean Simple White" Theme in the style.css-file:
#header h1 a {
padding: 15px 0px 30px 120px;
background: url(http://www.sabaki.dk/VKS/wp-content/themes/clean-simple-white/vks-logo.png) no-repeat;
}
#head-desc {
padding-left: 120px;
}
So I thought I should just write something similar for the new website and new logo:
#header h1 a {
padding: 15px 0px 30px 120px;
background: url(http://viborghallen.dk/wp-content/themes/twentyeleven/vhm-logo.png) no-repeat;
}
#head-desc {
padding-left: 120px;
}
But it does not work. Any suggestions?
Tulimafat
Member
Posted 5 months ago #
btw I just upgraded to wordpress version 3.5 and the updated theme twenty eleven, but it still did not help.
CSS is very theme/site specific, so you can't copy it from one to another.
But before you do anything, do you have a child theme or custom CSS set up? Making changes to theme files is a very bad idea -- particularly with a default WP theme.
Tulimafat
Member
Posted 5 months ago #
ahh yes. I forgot that.
I have now applied a child theme to my website.
The child theme has two specific files.
style.css and rtl.css
can I write anything in these to add a logo to the header?
Yep, do you want the same basic layout as the other site?
Tulimafat
Member
Posted 5 months ago #
Yes please.
The logos are also very similar. The one on the new site just has a green background to it.
Will I be able to change the position of the logo from the left side to the right side of the title text, if I wish to change it?
Try this in the new stylesheet:
#branding hgroup {
background: url("") no-repeat;
}
Put the URL to the image in the space above -- once it's showing on the page, we can fix the positioning.
Tulimafat
Member
Posted 5 months ago #
ok I have placed it in the file, but as you can see, it's too big etc... what do I type now?
Tulimafat
Member
Posted 5 months ago #
ahh... I'm making the logo smaller on my desktop and upload it to the ftp-server.
Tulimafat
Member
Posted 5 months ago #
and I could use some of the old code too: padding: 15px 0px 30px 120px;
Now I just need to position it better, but I'm out of ideas now.
Okay, looks go, but we need to do some more CSS - you should actually remove the padding that you added to the above CSS. So in your child, try this:
#branding hgroup {
background: url("http://viborghallen.dk/wp-content/themes/twentyeleven/vhm-logo.png") no-repeat scroll 0 0 transparent;
margin: 20px 0 0 10px;
}
#site-title, #site-description {
margin-left: 150px;
}
See what that looks like.
Tulimafat
Member
Posted 5 months ago #
Thank you so much. It's awesome :D
Tulimafat
Member
Posted 5 months ago #
Though I noticed a small thing. The title is moved down, when the logo is moved too. So the title and the search box don't line up.
How do I avoid moving the title down?
Try adding this:
#site-title {
padding: 2.65625em 0 0;
}
Adjust the padding number in the above - so it aligns how you want it.
It does look nice -- I like your logo a lot :).
Tulimafat
Member
Posted 5 months ago #
Well thank you :)
I have tried to insert the last part, but when I do so, the logo gets "cut off". It looks like there is a white margin above the banner.
Is there a way to let the logo get on top of that, or can the margin or padding from the banner be decreased in some way?
