Some Things for the Page

  • Unknown's avatar
    baertigerbackpacker · Member ·

    1. I wanna change the color of the social buttons on the top in the middle and at the botton …. Facebook blue ….twitter blue, instagram brown and youtube red….

    2. I wanna change the color of BaertigerBackpacker and Reise um die Welt sei frei und hab Spass dabei

    3. I wanna style the follow button with other colors

    4. I wanna change the color from the archive

    5. I need a Frame for the Follow Button at the Botton, for the social Buttons at the Botton, for the archive at the
    botton and for impressum und datenschutz at the botton. The frame should look like the footer frames on the right site

    6. I need a other color from the menu…. Blog, Neu Hier, Freeletics, Kontakt, Über Mich

    thank you

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

  • Unknown's avatar
    baertigerbackpacker · Member ·

    and at least I wanna make the social buttons on the top of the site bigger

  • kathrynwp · Staff ·

    Hi there – I’ll answer your questions in batches.

    You can use a browser inspector to target specific elements and change their properties with custom CSS.

    Here are some good resources for learning how to use a browser inspector:

    An Intro to CSS: Finding CSS Selectors

    An Intro to CSS, or How to Make Things Look Like You Like

    Intro to CSS: Previewing Changes with the Matched Rule Pane

    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    https://thewc.co/articles/view/web-inspector-tutorial

    https://cssworkshop.wordpress.com/

    1. I wanna change the color of the social buttons on the top in the middle and at the botton …. Facebook blue ….twitter blue, instagram brown and youtube red….

    Each menu item will need to be targetted separately by using the inspector to find the menu item’s unique class.

    For example, here’s Facebook:

    .jetpack-social-navigation .menu .menu-item-1014 a::before {
    color: #0000ff;
  }

    Try using your inspector to locate the unique class for the other elements, and copy the statement above, modifying just the menu item for each icon.

    You can modify the colour to whatever you like using a colour picker like this one: http://www.colorpicker.com/

  • kathrynwp · Staff ·

    2. I wanna change the color of BaertigerBackpacker and Reise um die Welt sei frei und hab Spass dabei

    That’s the Site Title and Tagline (site description). Again, using the inspector you can discover how to modify the colours by targetting the right elements:

    #logo .site-title a {
     color: #bb00bb;
}
.site-description {
     color: #6CCF3E;
}

    Change the garish example colours to whatever you prefer. :)

  • kathrynwp · Staff ·

    3. I wanna style the follow button with other colors

    This should do it for the Follow button in the right column:

    #subscribe-blog input[type="submit"] {
  background-color: #bb00bb; 
  color: #fff;
}

    background-color is for the button colour while color is for the button text.

    To affect other follow buttons as well, check for the unique ID on them.

  • kathrynwp · Staff ·

    4. I wanna change the color from the archive

    I’m not sure what you mean here. Can you clarify exactly what element you want to change?

  • kathrynwp · Staff ·

    5. I need a Frame for the Follow Button at the Botton, for the social Buttons at the Botton, for the archive at the
    botton and for impressum und datenschutz at the botton. The frame should look like the footer frames on the right site

    I”m also not sure what you mean here. Can you provide a screenshot of “the footer frames on the right site” as I’m not seeing anything obvious. Thanks!

    Here’s a guide on how to make a screenshot:
    http://en.support.wordpress.com/make-a-screenshot/

    You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library so I can see it. Thanks.

  • kathrynwp · Staff ·

    6. I need a other color from the menu…. Blog, Neu Hier, Freeletics, Kontakt, Über Mich

    To change the hover (rollover) colour of the menu items, try this for the background, and text colour, respectively:

    .main-navigation-menu a:hover {
  background: #bb00bb;
  color: #6CCF3E;
}

    If you wanted to change the non-hover state as well (background and/or text) let me know.

  • kathrynwp · Staff ·

    and at least I wanna make the social buttons on the top of the site bigger

    This should do it. Modify the value as you like:

    .jetpack-social-navigation .menu li a::before {
  font-size: 24px;
}

    If you need help with additional things not yet mentioned here, please start a new thread rather than adding to this one, which is already quite long. Thanks!

  • Unknown's avatar
    baertigerbackpacker · Member ·

    thank you

  • kathrynwp · Staff ·

    My pleasure.

  • The topic ‘Some Things for the Page’ is closed to new replies.