A Few Things
-
Hi there,
I posted this on a different forum but was advised that this will be the best forum to place it so here goes…any help would be appreciated.
I am using the forever theme and would like to do the following-
1. I would like to make the lines that separate the sections a different colour
2. The borders around the pictures I would like to make them a different colour
3. The section beneath the posts where it suggests other related posts, I would like this to be aligned centre and the line shorted so it only underlines the “in the mix”
4. I’ve tried to make the menu texts hover a different colour but this doesn’t seem to work. I use the css posted on a noter forum but unfortunately this is not working on mine.
5. The footer background, is it possible to have this a different colour? Or can I paste my own image as a background to the pictures I have on there?
6. Is it possible to widen the width of the blog itself?I hope this is not too much trouble but any help you can give will be greatly appreciated.
thanks
The blog I need help with is: (visible only to logged in users)
-
This should change the double-lined borders to a garish blue, swap out the hex colour code for whatever you’d prefer:
#main, #recent-content, #site-description, #access { border-bottom-color:#00f; } #featured-content + #description, #feature-slider + #description, #access { border-top-color:#00f; }This will change your image border colours:
#masthead img, #featured-content img, #recent-content img, .entry-content img, .entry-thumb img, .comment-content img, .widget img { border-color:#0f0; }I’m not sure which bit you mean for the “in the mix” related posts section, can you point out exactly which section you mean?
For the navigation menu if you mean the text hover colour then you can use something like this:
#page #access li:hover > a { color:#f00; }If you mean the background colour then it’s slightly more involved and needs a few extra rules to keep things looking tidy, but try this and let me know what you think (I’ve set the default to dark grey and the hover to black):
#page #access li:hover > a, #access ul ul { background:#333; } #access ul ul { box-shadow:0; padding:0; } #access ul ul a { border:none; border-radius:0; } #page #access li li:hover > a { background:#000; }For the footer area you can set a colour or image, this defaults to tiling the image, but if you have a photograph you can set it to not repeat if you like:
#colophon { background:#123456; } #colophon { background:url("http://placehold.it/20x20"); }You can set your theme to appear wider but be warned, people accessing it on netbooks and smaller screens will have a worse experience, especially as the Forever theme isn’t responsive so it will stay the same width on all devices.
#page { width:1100px; } -
Thank you for your response. I will get to work on the codes.
“in the mix” is the “related” section in posts where it suggests other posts related to the topic at the end of the posts. I was wondering if I could have the title aligned centre and the line should just underline the title as opposed to one long like like it currently it.
Thanks for your help once again
-
Thanks so much these worked perfect.
I have one more query, the box that separates the post, I would like to make the borders coloured as well and would appreciated a code for that please. thanks so much.
-
Sorry one final thing then I’m sure I’m done; is there a code for making my picture gallery aligned centre at the moment its only aligning to the left.
thanks so much
-
I had a feeling you’d ask that, I thought I’d included it with all the other examples but I guess not, here you go:
.indexed .format-image { border-color:#ff8484; }I still don’t see the related posts section, did you turn it off in your settings? Below your individual posts I just see the regular previous/next links then your Instagram widget in the footer widget area. If I’m looking in the wrong place can you provide the URL to a page on your site where it’s showing up for you?
-
It was being hidden by my Adblock Plus browser extension – sorry for the confusion! I’m assuming you’re only referring to the title of this section when you talk about how you want it styled, try this out:
div#jp-relatedposts h3.jp-relatedposts-headline { float:none; display:block; text-align:center; } div#jp-relatedposts h3.jp-relatedposts-headline em:before { border-top:none; } div.jp-relatedposts .jp-relatedposts-headline em:after { text-decoration:underline; } -
works perfect! thank you so much. Just one more trick with the gallery and I am done bugging you. Thanks so much for all your help.
-
Seeing as you’ve expanded your blog width try adding the new value (1100) into the Max Width box just below the main text area on the CSS customizer page and see if that fixes things. Let me know if it doesn’t and I’ll check to see if there’s a simple CSS solution.
-
Yes that did the trick! thanks so much.
Just one last, last thing and I promise I am doing. I am working on my header and trying to get it to the same with as the line that separates it from the red of the blog, the orange lines but for some reason its not working. I would add 1100 to the logo but I don’t know where to add this on css or if it would work… thank you
-
Most themes limit the header image to a certain size depending on the default width of the theme content area. In order to work around this you’ll need to upload a new, 1020px wide header image to your media gallery. Then you can use the following code to hide the existing header image and replace it with CSS so that the link still works. You’ll need to change the image URL and make sure the height attribute matches:
.custom-header { display:block; width:1020px; height:200px; background:url("http://placehold.it/1020x200"); } .custom-header img { display:none; } -
-
If setting a new width on the CSS page didn’t work for the featured images I think your best option is to centre that section on the page with this code:
#featured-content div { margin:0 64px; } -
This works. Thank you, thank you, thank you so much for all your help. I really appreciate you taking your time to answer my questions. Thank you so much.
-
No problem, I think the site looks really good – a little bit of customisation can go a long way!
-
Sorry please don’t shoot me but I just had a thought and if it isn’t at all possible no worries. In the footer where my instagram feed is, is it possible to
1) align centre the title
2) insert a picture in the background where the grey area is
3) close the gaps between the pictures? so the grey border doesnt show.these are not issues I just had a thought if not possible not to worry you have a been a MASSIVE help
-
Here’s the first two:
#wpcom_instagram_widget-2 .widget-title { text-align:center; } #supplementary { background:url("http://placehold.it/20x20"); }And I think it looks better with gaps between the images (probably more so if you upload a nice background image too) but you can squeeze them together with this:
.wpcom-instagram-columns-3 img { margin:0; max-width:335px; } -
You’re right it looks better with the space. I just need one more, which is a code to change the title to white so it shows ad then we are done
-
You should be able to add a color declaration to the previous bit of code so it looks like this:
#wpcom_instagram_widget-2 .widget-title { text-align:center; color:#fff; }
- The topic ‘A Few Things’ is closed to new replies.
WordPress.com Forums 