Public Ticket #1365305
Links & Further Projects & Space


  •  1
    Lisa Klinkenberg started the conversation


    I love the theme, but I'm a CSS newbie and keep having trouble with some topics, although i tried to solve them myself:

    1. i want the link color on :hover to be #f2583a, but on page http://buero-achso.de/index/about-me/ for example you see that on hover the color does not change, and also the underline is visible bevor hovering. it would be great if you have an advice on how to change the css (and where!) so that it works.
    (also I tried for hours to get rid of the unterline in the title text "büro achso" - if you have an answer to that, i'd also very very greatful...)

    2. (i figured out how to hide "further projects" :) so i have another question instead:
    I want my background-image to also display on the about page , but that does not seem to work - can you give me a hint how to?

    3. I want the space between images on http://buero-achso.de to be smaller, can you tell me where i can change it?

    thanks a lot!!! 


  •  723
    Marc replied

    Hi Lisa,

    most browsers provide a tool to inspect the used CSS code of elements. Simply right click on an element and select "Inspect Element", "Element Information" or else and the tool will open. It shows the used CSS and how to address the elements in custom code.

    You're currently using the following code:

    body.template-about .entry-content .intro a { border-bottom: 0px; !important!}

    Please correct it to:

    body.template-about .entry-content .intro a { border-bottom: 0px !important;}

    (the "!important" needs to be placed before the closing semicolon and it the correct keyword only contains a "!" in front of it)

    2) You can use the following additional CSS code to display your current background image on about template pages as well:

    body.template-about.custom-background {
        background-color: #925bff !important;
        background-image: url("http://buero-achso.de/wp-content/uploads/2017/11/raster1.jpg") !important;
        background-position: left top !important;
        background-size: auto !important;
        background-repeat: repeat !important;
        background-attachment: scroll !important;

    3) This code should work (please reduce the 50px value, it won't work "live" by inserting it in the tool mentioned above, you actually need to implement it and reload the page):

    @media screen and (min-width: 1150px) {
        .jetpack-portfolio-shortcode .jetpack-portfolio {
            margin: 50px;