WordPress theme Ixion By Automattic: header,footer,sidebar,template modifications and styling

Before I shared you the code related to theme photograply by theme Foundry . Today I am sharing you customization tricks of newly released Ixion theme by Automattic. WordPress theme Ixion By Automattic is a theme for non-profits, organizations, and schools.
Wordpress Ixion theme customization
Question 1: How to change top social icons color in  Ixion By Automattic

.site-header .jetpack-social-navigation a::before {
color: red !important;
}
You can use my shared code and ask question in the comments section.

Or can take my personal help.
Question 2: If you want to remove or hide that top social icons and search option container  in Ixion By Automattic

.utility-container {
display: none !important;
}

Question 3: To change background color of whole top header section in Ixion By Automattic

#masthead {
background: lightgrey !important;
}

Question 4: To change top header menu font color,size and font family in Ixion By Automattic

.main-navigation ul > li > a {
color: darkred !important;
font-family: “Archivo Narrow”, sans-serif !important;
font-size: 15px !important;
}

Also

to change hover font color change for header menus in Ixion By Automattic

.main-navigation ul > li > a:hover {
color: blue !important;

}

Question5: To change submenu font color, font size and font family

.main-navigation ul ul a {
font-size: 16px;
font-family:cursive !important;
color: blue !important;
}

and to change submenu hover font color

.main-navigation ul ul a:hover {
color: green !important;
}

 

Question 6:  How to change text showing at the  top header big image (site description)

.site-description {
font-family: cursive !important;
color: white !important;
font-weight: bold;
font-size: 34px !important;
}

Question 7: How to change  Call To Action button to different color (background), font size and family

.callout-button {
margin-top: .8em;
font-size: 15px !important;
color: black !important;
background: darkred;
}

theme lxion header image modification

Question 8: How to make Site description ( Text over the big header image ) and Call To Action button centered

.site-description-wrapper {
max-width: 100% !important;
text-align: center;
width: 100% !important;
}

Question 9: If you want to move the Text and Call To Action button in the big header image up

.header-overlay img + .site-description-wrapper {
margin: 0 1em 10.4em 1em !important;
}

Question 10 : If you don’t want to show “Recent Post” at the top of home page

.recent-posts-header {
display: none;
}

Question 10:  To Move  “More Posts” from  header to bottom

.more-recent-posts {
position: relative !important;
}

 

Question 11: If  you want to change sidebar widget background color

** i have made the current sidebar widget background color to transparent

.widget {
background: transparent !important;
}

theme ixion sidebar and footer widget modification

Question 12: How to change footer widget and sidebar widget font   size and family

** this code is applicable to   footer and sidebar links too

.widget *, .widget {
font-family: cursive !important;
font-size: 12px;

}

Question 13: How to change widget links color, font family and font size

.widget a {
color: red !important;                                                                                                                              font-family: cursive !important;
font-size: 12px;
}

Also

To change widget or sidebar links hover color

.widget a {
color: red !important;                                                                                                                              font-family: cursive !important;
font-size: 12px;
}

Question 14.  If you don’t want to show post date and category names in homepage, category or archive page and in search page (applicable for single post and single page too)

.entry-meta {
display: none;
}

Question 15: If you want to change Post or page titles font color, family and size to change ( applicable for search page, category page and archive page)

.entry-title, .entry-title a {
color: darkred !important;
font-family: cursive;
font-size: 17px !important;
}

Theme ixion continue reading link

Question 16:  In archive page if you want to give “Continue Reading”  link  a button shape

.more-link {
color: white !important;
width: 195px !important;
background: darkred;
padding: 14px;
}

Question 17 : In category or archive page if you don’t want to show the category or archive page name to show on top  in Ixion By Automattic

.archive .page-header {
display: none !important;
}

Or

theme ixion category name modification

Question 18: If you want to change color, font family or font size of the Category Name showing at the top of category / archive page

.category .page-title {
    color: darkred !important;
    font-family: cursive !important;
    font-size: 23px !important;
}
If you have any issue feel free to ask me question here in comments section

OR

Want me to help you personally for CSS Issue?CLICK HERE….

18 Responses to WordPress theme Ixion By Automattic: header,footer,sidebar,template modifications and styling

  1. Marta says:

    Hello,

    I have a question about IXION THEME: is it possible to get rid of the dark filter on the header image on the front page?

    Thank you in advance for your answer.

    Like

  2. friskyrocks says:

    You 100% have to have the Premium Plan to make any of these edits, correct? Or is there a workaround using the free personal plan?

    Like

  3. friskyrocks says:

    Can you please also help with how to have 4 featured content boxes on home page instead of 3?

    Like

  4. Hi. This is a great resource. It has helped me. But can you please let me know one thing? When you hover over a menu, the top of the dropdown box has a color. It is a little line of color at the top of the drop down box. Do you know how to change this??

    Like

  5. beckymcgraw says:

    Hi, could you please tell me how to remove the dark overlay over the featured posts below the header? I also need to know how to remove the padding between widgets on the sidebar, please. And one final thing…how do I change the font color on the featured posts under the header on the front page? Thank you in advance for your help!

    Like

  6. beckymcgraw says:

    I figured out two of my questions…the only one I can’t get right is removing the overlay on the featured posts.

    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 )

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: