Web Development & WordPress

WordPress theme Cubic by Automattic : CSS Documentation

allaboutbasic

Cubic theme customization

Cubic, a single-column, grid-based theme with large featured images, perfect for photoblogging.  Though  I shared customization of   WordPress theme Photography by The Theme Foundry , Photographer By Organic Themes  which are also great for photography or photoblogging. Now I am sharing the modifications of Cubic theme by Automattic.

Cubic Theme by Automattic zip download
You can use my shared css code or can ask question in the comments section.

Question 1:  How to change top header color, Homepage Image hover color, background color in Cubic theme by Automattic

Answer:

Go to Dashboard   then  Appearance  > Customize >Colors & Backgrounds, from there you can play with the backgrounds and image hover effect.

check the screenshot

Colors and background modifications

Question 2: How to change only the footer background color and the corresponding social icons color

#colophon {
background: darkred !important;
}

*** To change footer site info font color, font size and font family

.site-info {
color: white !important;
font-size: 14px !important;
font-family: cursive !important;
}

footer section background and color modifications

*** to change the footer social icons background color and icons color

.social-navigation a {
background: darkred !Important;
color: white !important;
}

*** To change footer social icons hover color

.social-navigation a:hover {
background: green;
}

Question 3 : How to add company info and copyright info in the footer of wordpress theme

Answer: In the theme I shared. Check footer.php (as per the screenshot below)

add copyright and company info

Question 4 :  How to change font color, font size and font family of site title in Cubic theme

.site-title {
color: darkred !important;
font-size: 31px;
font-family: cursive !important;
}

Question 5 :  How to change font color, font size and font family of site description or tagline in cubic theme

.site-description{

color: darkred !important;
font-size: 31px;
font-family: cursive !important;

}

Question 6 : How to show the top site title centered instead of left aligned

.site-branding {
width: 100%;
max-width: 100% !important;
}

.site-description {
display: none !important;
}

.site-title {
float: none !important;
text-align: center;
}

increase content section width wordpress

Question 7 : How to change content section width in single post page

Answer

.single-post .entry-author,.single-post .entry-content,.single-post .entry-footer {
width: 80% !important;
}

** To do same i.e increasing  content width of  the pages

.page .entry-author, .page .entry-content, .page .entry-footer {
width: 80% !important;

}

change number of columns to show in homepage

Question 8: How to change number of columns or to show 4 posts instead of 3 in homepage

.home article {
width: 25% !important;
padding-bottom: 25% !important;
float: left !important;
clear: none !important;
}

reduce gap just above or below page title

Question 9 : How to reduce gap just above or below the page title in Cubic theme by Automattic

Answer:

Reduce  top gap ( gap above the page title)

body.page .entry-header {
padding-top: 24px !important;
}

Reduce bottom gap (gap between page title and content)

body.page .entry-content {
padding-top: 24px !important;
}

archive or search result page title font color size and font family

Question 10: In archive or search result page, if you want to change font size, font color or font family

.archive .page-title, .search-results .page-title {
font-size: 24px !important;
color: darkred !important;
font-family: cursive;
}

Or,

If you don’t want to show the title in Archive or Search Result page

.archive .page-title, .search-results .page-title {
display:none !important;
}

post title background change in homepage

Question 11: How to change the background color showing behind the post titles in homepage grid layout

body:not(.filter-on) .hentry.has-post-thumbnail .entry-header {
background: rgba(255, 233, 244, 0.25);
}

** If you don’t want to show the post title in homepage then use the following code

header.entry-header {
visibility: hidden;
}

Question 12 : If you don’t want to show comments date in post comment section

.comment-metadata {
display: none !important;
}

.comment-author.vcard .fn {
padding-top: 12px !important;
display: block;
}

.comment-meta {
margin-bottom: 7px !important;
}

comments section background color date and others modification

Question 13: If you don’t want to show comments or comments section in your posts

div#comments {
 display: none !important;
}
Question 14: How to change the background color of the comments section (from light grey to your favorite one)
.comments-container{

background: blue;

}

Unknown's avatar

Published by allaboutbasic

90 thoughts on “WordPress theme Cubic by Automattic : CSS Documentation”

  1. hello, Prakash

    thanks for the great tutorial! i want to change color scheme for cubic, but there’s no such path as you specified (appearance > customize > colors & backgrounds) in my cubic version…

    the site is http://www.noraradu.ro, and i want to change the turquoise palette in a violet color, like in the logo i created for my friend.

    if you’re kind, how can i solve this?

    thanks,
    octanyum

    Like

    Reply

  2. Hi, does the Cubic theme supports social media plugins placed at individual posts? Meaning if I want to share individual photos via instagram, for example, can I do that by placing a widget under the photos? Thank you!

    Like

    Reply

      1. Hi, thank you for the fast reply. Yes, I would like to have fast share of content on social platforms. For each individual photo, I would like to have social media share options (widget placed below the photo or on the right side). Is that possible? Regards, Andra

        Like

      2. Hi Dearondogu
        if you want to change the hover background color of the homepage images, try this code

        .hentry.has-post-thumbnail .entry-link {
        background: red !important;
        }

        let me know if it helps
        Om

        Liked by 1 person

      3. Hi Om,
        That is very handy to know, but my problem lies somewhere else. It is the appearance of the posts itself.
        I have created three posts: ‘test’, ‘dresden’ and ‘cats’. Each of them showing a standard gallery, but as different post formats: ‘gallery’, ‘image’ and ‘standard’. Depending on the post format the pictures in the post show a white frame with a light grey border (image and standard) or black frame with light grey border with another black frame around it. I would like to change/omit the frames and borders. It would be great if you could have a second look at the blog posts.
        Best, Frank

        Liked by 1 person

      4. Hi Frank
        would you mind to try this please

        .gallery, .gallery *, .gallery .gallery-item::before {
        border: none !important;
        box-shadow: none !important;
        }
        .gallery {
        background: transparent !important;
        }

        let me know if it helps
        Om

        Like

      5. Hi Om,
        Seems my last reply got lost… Your last pieces of additional CSS helped to omit the black frame and light grey border. Last thing remaining is a black frame around the post itself. Btw, the black frame only occurs when the post format is set to gallery, which I would like to do.
        Many thanks so far. Hope you can help with the last remaining problem.
        Best,Frank

        Like

      6. Hi Frank
        try this code

        .format-gallery .gallery .gallery-item {
        border: none !important;
        background: transparent !important;
        }
        .format-gallery .gallery {
        background: transparent !important;
        border: none !important;
        }

        let me know if it helps

        Om

        Like

  4. Hi Om,
    My wife loves her photo blog with your theme. There are only a few things she asked me to change:)

    1. Can the posts on the homepage only display the year or month+year instead of the full date?
    2. Posts set to ‘visibility:private’, show ‘private’ in front of the post title on the homepage. Can it only show the title or the title plus a letter?
    3. How do you change the hover colour of the site title?

    Thanks,
    Frank

    Like

    Reply

    1. HI Frank
      are you using free plan of wordpress.com?
      *** i am not the creator of the theme :) but i can help to modify it ( if you are using it in your own hosting or business plan of wordpress.com )

      Om

      Like

      Reply

      1. Hi Om, we host the site ourselves and under your direction I already did some changes to the site (gallery background, site description colour etc).
        Best, Frank

        Like

      4. Hi Frank
        to change site title hover color
        .site-title a:hover {
        color: green !important;
        }
        To change date format, try this
        go to dashboard, then Settings > General > Date format and check custom format. Hope that will help

        For Private posts, do you have any posts which is showing private?
        also
        that issue will need modify theme file if u want to add additional text for private posts

        Om

        Like

      5. Hi Om,
        Changed title hover and date format. Thanks so much!!

        Re private posts, apologies I meant password protected posts. There is one on the blog now. It reads ‘protected: post title’. It would be amazing if this can be changed. Ready to create a child theme and dive into the css :)
        But would completely understand if this is going to far. You have already gone above and beyond with your help.
        Best, Frank

        Like

      6. Hi Frank
        the text in title which is showing for protected posts ( protected:post) can be changed to only title…
        but
        it will need me to modify the theme files as it is not only css issue
        if you need help for this…you can communicate me in my Personal Help profile i shared in the post
        Om

        Like

      1. It’s musiconrepeat.io but I have removed the logo for now because it looked a bit too big.

        Like

      3. Hey Om! I have added that logo now. I’d like it to be smaller so that the header isn’t so wide (and also so that it looks better on mobile).Cheers!

        Like

      4. thanks
        i have checked
        i found the desktop view logo is already smaller? you want the logo to be more smaller??

        for mobile view ( to make the alignment of logo and site title to be good) try this code

        @media (min-width: 240px) and (max-width: 560px) {
        .site-branding {
        text-align: center;
        }
        site-branding a.site-logo-link img, .site-branding a.site-logo-link {
        display: inline !important;
        float: none;
        margin-left: 0 !important;
        margin-right: 0 !important;
        }
        }

        let me know if it helps
        Om

        Like

      5. Thanks Om! It would be nice if I could make it a little bit smaller, maybe 75% or even 50%?

        Like

      6. would you mind to try this code please?

        @media (min-width: 760px) and (max-width: 12000px) {
        .site-logo-link .site-logo {
        max-height: 53px;
        margin-top: 23px;
        }
        }

        let me know if it helps
        Om

        Like

      7. Hey Om! It worked! Thanks a lot. Just wondering now, is there a way to make the white space at the top and bottom smaller? Also, on mobile, the site name still appears underneath the logo. any way you might know how to fix that so that they’re inline? Cheers!

        Like

      8. Thanks
        To reduce top gap, try this code

        @media (min-width: 760px) and (max-width: 12000px) {
        .site-branding {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
        }
        .site-logo-link .site-logo {
        margin-top: 8px !important;
        }
        .site-branding .clear {
        margin-top: 10px !important;
        }
        }

        For mobile logo and title issue, try this code

        @media (min-width: 240px) and (max-width: 560px) {
        .site-branding {
        width: 100% !important;
        }
        .site-logo-link .site-logo {
        max-height: 37px;
        }
        .site-branding .clear {

        float: left;
        font-size: 10px !important;

        }
        }

        let me know if it works or not

        Om

        Like

      9. Hey Om! That seems to work too! Thank you so much (and sorry for taking so long to try it out)!
        Cheers!
        Suzie

        Like

  7. Wow, thank you really much. So im trying to fix some Issues where i cant find any answers.
    1. Is there an option/code to have every post on the same page? Actually, there are max 10 Posts possible
    2. Is it possible to delete the “newest posts” section in the Menu?
    3. The standard secondary color in my page is by default turquoise (hover, links etc) where do i change it to black?

    Like

    Reply

    1. thanks
      if you want to show all posts instead of 10 there are option to change in code..but
      i think i prefer you check Dashboard > Settings > Reading and change the Number of posts you want to show first

      Also
      in the menu if you want to delete the latest posts.. i prefer you check Appearance > Widgets section

      Om

      Like

      Reply

  10. I’ve literally searched for hours on how to fix this issues. I just integrated woocommerce with my site to sell an ebook. On the product page, there is a large black space on top… I’m pretty sure this is due to the featured image. Using this code:

    .entry-thumbnail{
    display: none;
    }

    I was able to fix the issue –however, it also removed all of my featured images on my blogs :\ Do you know how to just remove the featured image on the product page? (there’s no option in the edit product page back end to do this either…) Here’s the link to my ebook https://outofbroken.com/product/change-your-story-change-your-life-ebook/

    Like

    Reply

      1. Hi, I hope you are feeling better.

        Yes I still need help in order to have only one homepage with all my post :)

        Thanks in advance for your help

        Best

        Like

  12. Dear Om,

    I would like to place a code in the header.php (for Google Tag Manager), but I can’t seem to find this .php file. Do you know in which file I can add the code; it has to be placed between the and tags.
    thank you very much in advance

    Like

    Reply

      1. I found the file, it was within another template which Cubic uses certain files from. Yes I’m using WordPress.

        Another question: the theme seems to load very slow, is that due to the fact that all images are loaded simultaneously when opening the website? And what can I do to make the load time shorter?

        Thank you

        Like

      4. would you mind to try changing the MS(milisecond value) in this code and try please?

        .pace .pace-progress {
        -webkit-transition: all 125ms ease-out !important;
        -moz-transition: all 125ms ease-out !important;
        -o-transition: all 125ms ease-out !important;
        transition: all 125ms ease-out !important;
        }

        Om

        Like

  15. Hi, if you can help, i want remove color of thumbnail post and i dont want show hamburger menu, is there any way to do it?

    Thanks for the others post, help a lot ;)

    Like

    Reply

      2. Hi Jose
        as you mentioned
        “i want remove color of thumbnail post”
        *** you mean u want to show them as Greyish ( which is showing when u hover over it) ?

        ” i dont want show hamburger menu, is there any way to do it?”
        ** please check the code..is that something you are asking?

        button.sidebar-toggle {
        display: none;
        }

        Like

  16. Hello,

    I wanted to remove the effect and the color you do by hovering over each post, and also wanted to move the menu to the top bar.

    Like

    Reply

  17. Dear Om,
    I have the same problem as ‘Dearondogu’ ..

    When I paste the below code in the ‘Text’ field, nothing happens — the black background with grey border does not disappear ..

    –>> What am I doing wrong?

    .format-gallery .gallery .gallery-item {
    border: none !important;
    background: transparent !important;
    }
    .format-gallery .gallery {
    background: transparent !important;
    border: none !important;
    }

    Thanks
    Christo

    Like

    Reply

  18. Hi, thanks for the beautiful theme!
    I would like to know if, in the main screen, it is possible to replace the date with other text of my choice (different for each of my posts) … In my case, I would like to replace the date with the name of the newspaper from which the link comes! Thank you

    My site url is singuia.earth

    Like

    Reply

  19. Hi, thanks for your helpful tips. I activated cubic theme, but in Appearance > Customize > it doesn’t show: Colors & Backgrounds. So how can I change this black blocks in the background? Thank you very much!!!

    Like

    Reply

Leave a reply to danmae Cancel reply