80 thoughts on “WordPress theme Cubic by Automattic : Theme Documentation, Support and Modifications of Header, Footer,Sidebar, Links, Text fonts and more”

  1. hello, om 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

  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

      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

      1. 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

      2. 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

      3. 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

      4. 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

      5. 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

  3. 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

    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

      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

      2. 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

      3. 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

      4. 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

      2. 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

      3. 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

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

        Like

      5. 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

      6. 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

      7. 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

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

        Like

  4. 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

    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

  5. 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

      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

  6. 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

      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

      1. 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

      1. 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s