Need help? Check out our Support site, then


Blocco theme : Css file/code available ?

  1. Hello,

    I want to customize my Blocco theme, but can't do it "on the fly". For example to remove the small lines behind the image/post container or change the look of the nav tabs, or add more images/post rows, etc.

    Is it a way to obtain the CSS file to make changes through Custom Design ??

    Thanks for your help

    The blog I need help with is trufferarchitectes.wordpress.com.

  2. At WordPress.com, you don't edit the existing CSS. You create rules to override the existing CSS, or if you are going to completely redesign the theme, you can choose to start from scratch.

    Google Chrome has a developer tool built right into it that can help you identify the CSS rules for specific elements in a page and then you can copy and paste that CSS rule into your Custom CSS and edit it as desired. We have some introductory videos on using the web browser developer tools to Find Your Theme's CSS.

    The image used for the angled lines behind the content is a background declaration in .site-main. To get rid of them, you would do the following.

    .site-main {
    background: none;
    }

    For the menu colors, these two rules will allow you to change the styling on the non-hover and also hover states. I pulled this out of the long list of selectors in the original CSS so that I could target the menu only.

    .site-navigation .menu a {
        color: #CC0000;
        background-color: #66FF66;
        border-color: #FFB266;
    }
    .site-navigation .menu a:hover {
        color: #66FF66;
        background-color: #FFB266;
        border-color: #66FF66;
    }

    Your theme has infinite scrolling, and it is active at Settings > Reading, so as you add more posts, more will show on the main page as people scroll down. It will load up to 12 each time and keep loading till there are no more posts to load.

    Changing things to show more columns of posts/images is a little tricky. You can increase the width in #site-main from 762px to perhaps 1062px and get 4 columns, but the site then becomes a little flakey when the browser window is narrowed. You can try it out and see what you think when you narrow down your browser window.

    .site-main {
    width: 1062px;
    }
  3. Thanks a lot thesacredpath !

    That's exactly that.

    If I may abuse a bit more ... do you know if it's possible to get rid of the rounded part (square them angles) of the tabs or do act on the shape of theses tabs (mae them bigger, sqaure or else) ... and get rid of that shade under the "home" tab ??

    Many thanks for your time and help :-)

  4. You can square the corners and shadow with this.

    .site-navigation .menu a {
    border-radius: none;
    -webkit-border-radius: none;
    -moz-border-radius: none;
    }
    
    .site-navigation .current-menu-item a {
    text-shadow: none;
    }
  5. Great ! Thank you :-)

  6. No problem.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags