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

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: