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

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.

Or can take my personal help.

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 {
 displaynone !important;
Question 14: How to change the background color of the comments section (from light grey to your favorite one)
.comments-container{

background: blue;

}

If you have any issue feel free to ask me question here in comments section

OR

Pay me some, I will help you for CSS Issue Personally CLICK HERE….

24 Responses to WordPress theme Cubic by Automattic : Theme Documentation, Support and Modifications of Header, Footer,Sidebar, Links, Text fonts and more

  1. octanyum says:

    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. Andra says:

    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

  3. dearondogu says:

    Hi Octanyum,
    Great theme. Is there a way to change the colour of the background and frame for galleries created in the posts? Regards, Frank

    Like

    • Hi Frank
      please share me the post url where you are using gallery please
      Om

      Like

      • 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

      • dearondogu says:

        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

      • 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

      • dearondogu says:

        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

      • 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

      • dearondogu says:

        Amazing, super quick reply and it worked. Fantastic! Thanks so much!

        Like

      • Pleasure Frank

        Like

  4. dearondogu says:

    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

    • 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

      • dearondogu says:

        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

      • Share me the site url again please

        Like

      • dearondogu says:

        georgeandclementine.com

        Like

      • 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

      • dearondogu says:

        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

      • 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

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 )

w

Connecting to %s

%d bloggers like this: