Font color change/ backgrund color change – Goran Theme

  • Unknown's avatar
    kzdigital · Member ·

    A bit of help please …

    Is it possible to change colour of the font in top menu (Goran Theme)

    and also change the color of the background – From page second page (Grid view)

    Please help!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, to change the color of the top menu items, add the following and you can adjust the color as desired. 

    .main-navigation a, .main-navigation a:hover, .main-navigation a:focus, .main-navigation a:active {
    color: #ee22bb;
}

    If you are talking about the section on the main page below the image at the top with the three entries, add the following and adjust the color. 

    .featured-page-area {
    background-color: #2255ee;
}
  • Unknown's avatar
    kzdigital · Member ·

    OMG Thank you very much! It worked!

    How about the bottom bit with Social widgets? How do I change that?

  • Unknown's avatar
    kzdigital · Member ·

    I may as well as you all questions now:

    How do I:

    1. Change font color in the middle section of the homepage?
    https://thebarbolton.com

    2. Add Call to Action button under Welcome to The Bar Bolton

    3. Here: https://thebarbolton.com/events/ How do I change colour of the background? Can I make Friday,Saturday, Secret Soiree bigger and above the thumbnail images?

  • Unknown's avatar
    thesacredpath · Member ·

    For the entry summary and then titles on the center section, add this and adjust the colors as you desire. 

    .featured-page .entry-summary {
    color: #fff;
}
.featured-page .entry-title a {
    color: #fff;
}

    For the footer widget area background color. 

    .footer-widget-area {
    background: #f1f0f0;
}

    For the call to action button, go to the Goran Theme Showcase Page and scroll to the bottom to Extras and the code for the button and button minimal is there. You can add that to the content area on your front page and then edit the link and the label text as desired.

    For the Events page, add the following CSS and edit the background color code as you desire. 

    .site-content {
    background: #fff;
}
  • Unknown's avatar
    kzdigital · Member ·

    Thank you so much for your help!

    How to change top left hand corner logo – THE BAR BOLTON
    as well as button colours? When static and once hoovered over

    Can I make Friday,Saturday, Secret Soiree titles bigger and above the thumbnail images? https://thebarbolton.com/events/

    And on second page of home page titles bigger under images? Hire, Booths, Cocktail masterclass ??

  • Unknown's avatar
    kzdigital · Member ·

    Also how do I change colour of the font in widget area? I can’t see the address of the business now?

    How can I change colour of the footer? and fonts there. Also I would like to remove info about the wordpress and theme.

    Thank you!

  • Unknown's avatar
    thesacredpath · Member ·

    How to change top left hand corner logo – THE BAR BOLTON
    as well as button colours? When static and once hoovered over

    I’m not sure what you want to change on the site title (logo), so I’ve included a size and color in the following two CSS rules. The first would allow you to set the size and non-hover color. The second the hover color. 

    .wf-active .site-title {
    font-size: 2.1rem;
}
.wf-active .site-title:hover {
    color: #dba901;
}

    On the “button color” I’m assuming you mean the menu items on right. You can add this and then adjust colors as you see fit. I’ve mimicked the colors on your Read More buttons below. 

    .main-navigation a {
    background: #dba901 none repeat scroll 0 0;
    border: medium none;
    border-radius: 4px;
    color: #fff;
    padding-left: 12px;
    padding-right: 12px;
    text-shadow: none;
    padding-top: 8px;
}
.main-navigation a:hover {
    background: #000;
    color: #fff;
}

    Can I make Friday,Saturday, Secret Soiree titles bigger and above the thumbnail images?

    .featured-page .hentry, .grid .hentry {
    position: relative;
    padding-top: 50px;
}
.wf-active .featured-page .entry-title, .wf-active .grid .entry-title {
    font-size: 1.1em;
    position: absolute;
    top: 0;
    width: 100%;
}
.wf-active .featured-page .entry-title a, .wf-active .grid .entry-title a {
    color: #fff;
}
.wf-active .featured-page .entry-title a:hover, .wf-active .grid .entry-title a:hover {
    color: #dba901;
}

    And on second page of home page titles bigger under images? Hire, Booths, Cocktail masterclass ??

    I’ve included that in the above CSS.

    Also how do I change colour of the font in widget area? I can’t see the address of the business now?

    This allows you to change the widget title colors and also the widget text colors.
    Also how do I change colour of the font in widget area? I can't see the address of the business now?

    We are not allowed to hide or edit the WordPress.com and theme footer credits per our Terms of Service (#1 Attribution). See the Frequently Asked Questions on the Custom Design support page for more information.

    You are allowed to restyle the footer credits to better fit with your design as long as they remain readable, and you are also allowed to add text to the footer, such as a copyright statement. The following makes the grey area at the bottom the same color brown you have for the site, and changes the color of the WordPress.com and theme credits to a color that is less noticeable. 

    .site-footer {
    background: #2a1b0a;
}
.site-info, .site-info a {
    color: #777;
}
  • Unknown's avatar
    kzdigital · Member ·

    Thank you very much for your help! It all worked!

    I wish I could write CSS like you!

    By Button colour I meant, that I would like to change ‘Click to Explore’ under ‘Welcome to The Bar’ to #DBA901

    https://thebarbolton.com

  • Unknown's avatar
    thesacredpath · Member ·

    Awesome, and you are welcome.

    This may be more than you are looking for. The first rule is the non-hover state border and text color. The second would allow you to change the colors when the button is hovered with the mouse. 

    .hero a.button-minimal {
    color: #2255ee;
    border-color: #22ee55;
}
.hero a.button-minimal:hover {
    color: #ee5522;
    background-color: #22bbee;
    border-color: #bb22ee;
}

    Feel free to edit my (seriously obnoxious) sample colors as you see fit. :)

  • Unknown's avatar
    kzdigital · Member ·

    Thank you! It all worked fine.

    Can I add videos to home page? Or is this a limitation to this theme?
    like here, when you hover over the images – 4th page down : http://thealchemist.uk.com/venues/trinity-leeds/

  • Unknown's avatar
    thesacredpath · Member ·

    @kzdigital, currently this is not a feature that we have on any of our themes, but I have posted this as something for us to discuss.

  • Unknown's avatar
    kzdigital · Member ·

    Hi, I’ve got few more questions…

    How do I change a color of the font here: https://thebarbolton.com/cocktail-masterclass/

    Here https://thebarbolton.com/events/
    How do I make image central? Not it looks like edges have been cut off
    How can I remove EVENT from the middle of the page?

    Here: https://thebarbolton.com/events/
    Can I control Thumbnais? I would like to see the whole image not just a bit of it?

    here: https://thebarbolton.com Second page down. How can I align READ MORE buttons ?

  • Unknown's avatar
    thesacredpath · Member ·

    Hi,

    How do I change a color of the font here: https://thebarbolton.com/cocktail-masterclass/

    Hmmm, given the nature of the image there, I don’t know of a font color that is going to give acceptable readability. 

    .page-id-123, .hero .page-title, .hero .hentry {
    color: #cc0000;
}

    I see though, that you have set text color within the page editor, which you will have to remove in order to have the CSS above work. Styling set directly in the editor cannot be overridden with CSS.

    As an alternative to changing the text color, you might want to try setting a translucent background color on the entry content for that page, which will make the text more readable, but still let the image show through. See what you think with this. The last number, the 0.5, is the opacity. The closer to 1, the more opaque, the closer to zero, the more transparent. 

    .page-id-123 .entry-content {
    background-color: rgba(0, 0, 0, 0.6);
}
  • The topic ‘Font color change/ backgrund color change – Goran Theme’ is closed to new replies.