Support » Theme: Freak » Page Names & a pink line at the bottom

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hi there,

    I’d like to know this too; I’ve just updated to this theme and LOVE it (thank you!!!) but if I could change the pink/peach coloured accents (eg the line along the footer, and along the top of each Blog post preview image) throughout the site to my own brand colour (#998550) it would be just perfect.
    I’ve scoured the Stylesheet and copied every colour code I could find into Photoshop one at a time to find it but none relate to a peachy/pinkish colour or anything close.

    If someone could help me and the OP with some code to change this, that would be amazing!

    Thanks so much

    Tara

    The color is #F07261.

    If you find the places where that is used (mostly borders and links), you can replace the hex number with your preferred color.

    I found it easier to copy the code where the pink color is used, add my hex colors, and go into Customize > Custom CSS to paste it in. Delete your cache, refresh, and you’re good to go!

    Hi Ashley,

    Thanks so much for your reply, sorry for the delay in responding – I never got a notification of your comment.

    I copied and pasted the entire stylesheet into Word and did a “Find” search for the colour code (hex number) you gave but there were no occurrences of it. 🙁 I’m completely confused. It definitely looks like the colour in the theme when I plug it into my colour picker in Photoshop, so how could it not be in the stylesheet?

    I checked all the other templates as well, just in case, but nothing. The mind boggles!!!

    Okay, I got the answer from a web designer acquaintance, thought I would post it here for others looking for the same answer.

    In your custom.css file, paste this code:

    #colophon, .grid .featured-thumb {
    border-top-color: #998550;
    }

    .readmore a {
    color: #998550;
    }

    Substitute the colour code for whatever colour you want where it says #998550, that’s just the code for the colour I wanted (gold). This changes the colour of the pink line along the bottom of the page, as well as along thumbnails on your blog if you have one, and the “read more” text in the blog previews. If you don’t have a blog page it won’t matter, it will just change the line along the footer.

    Hope that helps! 🙂

    That doesn’t remove that peach color from the widgets or the recent posts outline. I can not find #F07261 in any of the code. I like this theme but not being able to match my widgets to the rest of my site is no bueno. Anyone have any idea how to resolve this?

    You’re right, Eogaux. 🙁 I didn’t realise that until just recently, but have been unable to find anyone to figure it out for me. I’d love some help to figure this out too – an addition to the above code to remove the peach from the widgets and the recent posts outline would be fantastic.

    Thanks so much

    I’m not familiar with this particular theme; do either/both of you have links to your live sites? It’d help me try to help pinpoint each of your issues.

    Hi Allison, thanks so much for your reply. My site is http://www.taralemana.com. The problem is on the blog pages: http://www.taralemana.com/blog/; as you can see there, the previews of the blog entries have a gold-coloured line above them and the “read more” after the preview is in a matching gold – my theme colour. However, if you click on any one of the blog entries, you’ll see that the large image at the top of each post has a peach-coloured border. The link in “You must log in to comment” at the bottom of each page is also still in peach.

    A new issue that’s just cropped up that hasn’t been there before is that I can see a weird little black square with three peach lines in it in the top left corner of each page that stays in view as you scroll down the page; I have no clue where it’s come from because it wasn’t there before and I have not just run an update.

    I would also like to make changes to the size of the fonts in the page title and the navigation menu (slightly larger) as they are very small and difficult to read, but this theme does not allow for that either – any hints as to how to achieve this would be gratefully received as well!

    Many thanks!

    Tara

    Hi Tara,
    I think I have a few tweaks/suggestions that could help things.

    For when you click through to your individual blog entries, I think adding this CSS code should fix it:

    .mega-container.content .content {
       border-top: solid 3px #998550;
    }

    This CSS chunk will change the colours of the links inside that “must log in” section:

    p.must-log-in a {
       color: #998550;
    }

    The icon with the three little lines looks like your mobile menu for when a visitor is on a mobile device. Is it possible you set it to visible or inline-block when tweaking other code?

    For your font size, that would be relative straight foward once you figure out the sizing you’d like to achieve.

    For the title (currently “Tara Lemana”):

    #masthead.header-medium h1.site-title {
       font-size: X;
    }

    For the sizing of the items in your top-menu:

    #top-menu ul li a {
       font-size X;
    }

    Keep in mine that where the X’s are you would replace with something like 70px 🙂 or whatever your preferred size turns out to be. Let me know how this all works out!

    Also, just a note to add the following CSS code in the style.css file of your child theme or if your theme doesn’t have custom CSS tab add it in your site using the following plugin:

    http://wordpress.org/plugins/simple-custom-css

    If you change the CSS in your theme and then upgrade it at some point, your styling changes will be lost.

    Hi Allison,

    Thanks so much, this has been extremely helpful! I’ve got partial success, at least! 🙂 The colour elements are now a lovely shade of gold to match the rest of the site, yay! The “log in” bit disappeared altogether when I added in the code, but I’m not bothered, mine is not the sort of website people register or comment on anyway.

    The font size changes are completely confounding me, however. When I input those lines of code (with a font size like 70px) subsituted for “X” of course, nothing happens. I’ve tried different font sizes in case I was entering the current font size by coincidence, and nothing. When I enter this:

    #top-menu ul li a {
    font-size X;
    }

    and save the stylesheet, it is automatically changed to this once it’s saved:

    #top-menu ul li a {
    }

    It just removes the font size reference altogether – why would it do that? The one for the title stays unchanged, but it also doesn’t seem to affect anything on the site – even after refreshing.

    Question, to change the tagline (“contemporary portrait art”) size rather than the title (“Tara Lemana”), would I just substitute “tagline” where it says “title”? I’ve tried both but neither affects either the title or the tagline. 🙁 Not sure where I’m going wrong?

    In any case, thanks so much for all your help so far!! Much appreciated!

    Oh, for the font-size! It might be because of a typo – sorry about that – there should be a colon in-between font-size & X. That might be why it’s just not recognizing it without the syntax. Let me know if that fixes it!

    #top-menu ul li a {
       font-size: 70px;
    }

    To switch the tagline size, you would want to exchange for the selector: #masthead h2.site-description

    The h2 is a different type of heading and the class name is .site-description

    That worked!!! Thank you so much Allison, that did it! 🙂 I’m a happy girl, really appreciate all your help!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Page Names & a pink line at the bottom’ is closed to new replies.