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;
}

Question 18:  Child theme for  theme Ixion By Automattic

Click Here to Download Theme Ixion by Automattic

 

Question 19: How to replace PROUDLY POWERED BY WORDPRESS | THEME: IXION BY AUTOMATTIC.   with my own company information

Answer: Replace the  php code of footer.php (in the child theme I shared) according to the image attached

Theme-ixion-footer-credit-modification

 


<div class="site-info">
<a href="https://wordpress.org/">Proudly powered by WordPress</a>
<span class="sep"> | </span>
Theme: Ixion by <a href="http://automattic.com/" rel="designer">Automattic</a>.</div>

 

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

99 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

  7. ddtcrew says:

    On my home page the three featured post images do not reach the same left hand and right hand margins as the top header image. How can I correct this?

    Like

  8. Thanks. Your code works great. Any idea how to change the general link colors? For example, do you know the code to change the color of an embedded hyperlink in a post or page?

    Like

  9. fiskelust says:

    Is there any way to remove the Chinese sign (or whatever it is 🙂 ) on the menu in the mobile version? Both on the meny button and on the menu itself.

    Thanks for this great resource!

    Like

  10. fiskelust says:

    Please see this screenshot: http://wp.fiskelust.se/wp-content/uploads/2017/02/meny.jpg

    I have used my top of the line – design skills to create the illustrating arrows 🙂

    Like

    • HI
      would u mind to try this code please?
      it will remove the symbol from menu…

      .main-navigation .menu-toggle:before { display:none !important;}

      *** though it is not wise to remove the symbol..it seems the font is missing..for which it is showing a symbol..instead of actual symbol

      Om

      Like

  11. Agasconh says:

    Hi! Is there by far any chance for the posts area to JUST show the title and tags without showing the post’s body?

    Like

  12. Hello,

    Is there a way I can insert text into the top header above the menu? Next to the search button?

    Like

  13. Hello,

    Is there a way I can remove the featured image from the actual page but keep it as a featured image on the homepage?

    Thanks so much 🙂

    Like

  14. Is there any way to remove the “Powered By” footer?

    Like

  15. This worked, but I was cautioned using the “#site-info {display:none}” because this
    will put my site’s SEO at risk with Google.I’ve read this because that’s a technique that spammers use to hide the links from users while still showing it to Google and they flag sites are reduce the SEO ranking as a result. I appreciate your help, but it this truly the only way to remove it?

    Like

    • Hi
      as you are using your own domain hosting, better you use your company name or others there?

      and I don’t think it is logical Google penalize for site-info css code… because.. your site contents is more valueable then ur footer info

      Om

      Like

  16. Yes, I am using my own domain hosting through siteground. Yes, using my company name there is an option.

    Like

  17. Is there any code you can recommend to replace this? Thanks in advance

    Like

  18. Hi there ! thanks a ton for this article!
    Please can you guide me to remove the Recent posts archives from the home page – https://phoenixindustriesindia.com/ . Please note it’s not a widget. It has come with the theme. Thanks a lot in advance!

    Like

  19. Nellie says:

    Hi. Thank you for the CSS on this page, it has helped a lot! How can the small grey lines above and below the header area and the footer be deleted or changed color?

    Also, can the All CAPS on the main nav links be turned off to have upper and lower case letters?

    Thanks!

    Like

  20. Nellie says:

    Also, is there a way to replace the default logo url with a custom url? thanks again!

    Like

  21. jameshopkirk says:

    Hi there! I have an issue where if I add a caption to an image in a post (using the caption tool), it forces the image to centre align, rather than left align, pushing it into the sidebar widget. For the most part I get round this by not using the caption tool and just adding the caption text underneath and making it italic so that it’s obviously not part of the body copy. However, this doesn’t work for the top image – if I do this, the caption gets pulled through to the homepage and appears in the feed of text under the headline for each post. Is there a way around this?

    Here’s an example: https://lambethcuts.wordpress.com/2017/03/10/fionna-martin-far-left-and-ellie-brown-centre/

    Thanks so much!!

    Like

    • HI James
      would u mind to use the Caption tool and let me check?

      as you are using wordpress.com only css can be used to solve the issue

      please use the caption tool and i will check to solve it

      Om

      Like

  22. Mike Sorel says:

    Hi,
    We have activated the Ixion theme on a site on wordpress.com. Can you please tell me where we can edit the text in the text widget on the sidebar.
    Thanks in advance.
    Mike

    Like

    • HI Mik
      it is in Appearance> Widgets section from where u can add widgets or changes sidebar contents
      Om

      Like

      • Mike Sorel says:

        Hi Om,
        Thanks you for your fantastically prompt reply.
        In WordPress.com there is no Appearance menu (but I know that this menu exists for a wordpress site loaded on my own server). Is there some way that I can send you a screen shot of what I am talking about?
        Regards
        Mike

        Like

      • Mike
        there should be Appearance menu..but you will see that when you will logged in your dashboard
        yoursite.com/wp-admin

        u got the point?

        Like

      • Mike Sorel says:

        Hi Om,
        OK, got it now, I was getting confused by the cut down editing menu of wordpress.com, not realising that there was also the wp-admin page.
        Thanks for all your help.
        Mike

        Like

      • Pleasure Mike 🙂

        Like

  23. Hello Om!

    I’m just wondering if it’s possible to switch the search bar to a widget area. My website is multilingual and I would like to display the language switcher in the top right corner.

    Thank you and awesome work you got here, keep it up!

    Like

  24. Mike Sorel says:

    Hi Om,
    Can you please remove “Notify me of new comments via email” and “Notify me of new posts via email”, from my user profile on your site.
    Thanks
    Regards
    Mike

    Like

  25. Ixion looks perfect for my current project—but when I activate it, the three image areas just below the main image do not show up. How can I reveal and use them? Thanks.

    Like

  26. Hey Om!

    It’s me again. I’d like to know if there is a way to change the color of just one or some items in the header menu as opposed to all.

    Cheers!

    Like

  27. Hi this might sound like a really obvious question but could you tell me how to get my featured content to work? the website link is https://gatewayrecruitment.wordpress.com/ should you need it.. my theme should just support featured content but i dont seem to be able to figure it out… its probably a really easy fix that i just cant see haha THANKS

    Like

  28. I have been able to make several changes successfully, but is there a way to align the menu bar to the right side of the page? I’ve tried everything I can think of but nothing seems to work. Thanks

    https://eastpennhistory.wordpress.com/

    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: