Web Development & WordPress

WordPress theme Ixion (for non profit organization and schools) By Automattic: Create your website and modify header,footer,sidebar,template modifications and styling

allaboutbasic

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.

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 and Parent theme of  theme Ixion By Automattic

Click Here to Download Theme Ixion by Automattic Parent Theme

Child Theme of 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

[code type=”html”]

<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/&quot; rel="designer">Automattic</a>.
</div>

[/code]

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

145 thoughts on “WordPress theme Ixion (for non profit organization and schools) By Automattic: Create your website and modify header,footer,sidebar,template modifications and styling”

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

    Reply

    1. HI Marta
      thanks…sorry for the late response
      yes that dark filter over the header image can be removed…please try this code

      .header-overlay::before {
      background: transparent !important;
      }

      Om

      Reply

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

    Reply

    1. Hi
      please try this code

      .main-navigation ul ul {
      border-top: 2px solid red !important;

      }
      .main-navigation ul ul::before {
      color: red !important;
      }

      let me know if it helps
      Om

      Reply

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

    Reply

      3. Hi, i´m sorry but i´m new in desing and not so good with english. I need to use this code but i doesn´t kwon where tu put it. Can you help me please?

      4. Hi
        in wordpress (if you are using wordpress.com free hosted site) there is an option of CUstom Design..which u need to purchase from them
        otherwise (if you are using your own domain and hosting ..like hostgator or bluehost) you can use Simple Custom CSS plugins.

        Om

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

    Reply

  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?

    Reply

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

    Reply

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

      Reply

      1. Thanks, that removed the sign from the menu, but the top sign on the drop down menu is still there, can you help me with that too?

        Thanks for great and quick support!

  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?

    Reply

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

      Reply

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

    Reply

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

    Reply

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

      Reply

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

    Reply

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

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

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

  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!

    Reply

      1. Can you please clarify a bit? I would like to replace the search bar, (but the search bar only, keeping the social media menu) by putting my language switch icons in its place.

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

    Reply

  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.

    Reply

  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!

    Reply

      1. oh of course. basically i want to set three of my pages (the dropdown of the ‘recruitment’) as featured content… is this possible? maybe even with a “simple” code instead of featured content. but i like the display with the picture + overlay text that comes with the featured content. do you know if thats possible?

    1. HI
      thanks
      the way u seems coded the header doesnt seem proper…

      you can try this code initially

      #masthead {

      width: 100% !important;
      }
      .branding-container {
      max-width: 83% !important;
      }
      nav#site-navigation {
      float: right !important;
      }
      let me know if it helps
      Om

      Reply

      1. Thank you! That code worked perfectly. Is there any way that I can add a few lines of text to the right of the logo without bringing back the search bar on the top of the website?

  30. I’m having a hard time getting the Call To Action button colors to work. I’ve changed the color of the button and the text but it goes all white on hover and reverts back to the original yellow when clicked. Where in the code do I change these aspects?

    Reply

    1. Thanks
      sorry for the late response
      in which page you want to do this change? share me that page url
      also
      are you using wordpress.com free hosted site? let me know
      Om

      Reply

    1. Hi Damien
      would you mind to try this code please?

      .branding-container {
      background: blue;
      padding-left: 0px !IMPORTANT;
      max-width: 100% !important;
      padding-right: 3% !important;
      }
      let me know if it helps
      Om

      Reply

      1. Hi Om,

        thanks for your answer i found solution before :

        #infinite-handle span {
        border: 0;
        border-radius: 0;
        background: #000063;
        box-shadow: none;
        color: white;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 1;
        padding: 1.4em 1.6em 1.2em;
        transition: .3s;
        }

        button:hover,
        input[type=”button”]:hover,
        input[type=”reset”]:hover,
        input[type=”submit”]:hover,
        .button:hover,
        #infinite-handle span:hover {
        background: #5affb5;
        box-shadow: none;
        color: #fff;
        transition: .3s;
        text-decoration: none;
        }

  35. Hello

    You seems so helpfull ! Could you please tell me if it is possible to keep the side bar only on the home page? it doesn’t look right on the other pages..

    Thanks for your help :)

    Reply

    1. Hi Amy
      to change all button colors try this

      button, input[type=”button”], input[type=”reset”], input[type=”submit”], .main-navigation-menu a:hover, .main-navigation-menu a:active, .main-navigation-menu li.current-menu-item > a, .widget_wpcom_social_media_icons_widget ul li a, .more-link, .entry-tags .meta-tags a:hover, .entry-tags .meta-tags a:active, .widget_tag_cloud div a:hover, .widget_tag_cloud div a:active, .wp_widget_tag_cloud div a:hover, .wp_widget_tag_cloud div a:active, .post-navigation .nav-links a, .post-pagination a:hover, .post-pagination a:active, .post-pagination .current, .infinite-scroll #infinite-handle span:hover, .main-navigation-toggle, .main-navigation-toggle:active, .main-navigation-toggle:focus, .main-navigation-toggle:hover, .main-navigation-menu .submenu-dropdown-toggle:hover, .main-navigation-menu .submenu-dropdown-toggle:active, .post-slider-controls .zeeflex-direction-nav a {
      background: darkred !important;
      }

      let me know if it helps
      Om

      Reply

  37. Hi Om – how can I change the number of recent posts – currently it shows 5. I can change to ‘none’ using CSS, but I can’t change to 3 for example. Thank you.

    Reply

  38. I am using the lXION theme. I used your code to change the masthead color to whitesmoke but now there is not enough contrast with the site title in the font color of white. I also want the the text to be normal because my site title has mixed case. Can I add additional CSS to change the text to normal (I tried text-transform but it did not work) and change the font color of the site title?

    Reply

      1. It is a WordPress site and it is private until it is ready to launch. I did not see URL referenced in the previous comments.

  39. Hi Om –
    I wonder if you could help me with 2 things on the mobile version? I have an Ixion child’s theme.

    In one of your posts, you changed the color of the gold line and triangle that shows up on the submenu of the home page. That worked perfectly for the desktop/tablet sizes, but at the mobile size it switches back to gold. How do I fix that? There is also an additional line that separates the subcategories (in my case, it’s red) that I would love to get rid of.

    2. Is it possible to use a different hero image for the mobile size? I have a square version.

    Thanks in advance for any advice you have to offer on either of these things!

    Reply

  40. Thanks so much for your assistance on this, Om! I’ve found your site to be such an amazing resource in general. You have my deep appreciation for your time and great code. :)

    Reply

  41. Thank you! Your code works great. Do you have code to change the hyperlink colors in the text of the website?

    Reply

      2. Hi Erica
        please try this first

        .entry-content a {
        color: #CA7E09 ;
        }

        if it doesnt work, then try this

        .entry-content a {
        color: #CA7E09 !important;
        }

        Regards
        Om

      3. Hello again,

        What code would I use to change (increase) the font size of the text within the featured image boxes on the homepage?

        Thank you!

  42. Hi Om,
    I am trying to use the CTA button on Ixion, but a black bar shows behind the button. How can I remove the bar or at least change to white so that it does not show? Also, I would like to change color of the button and center it on the page. Any help is appreciated.

    Reply

  43. ariss-usa.org/
    I have the red CTA button and have it centered. I jut need to get rid of the black bar.
    Thank you.

    Reply

  44. It is the tagline area, but I do not want that to show, unless I can show that and not the site title.

    Reply

  45. I just published again.
    I tried using:

    div.site-description-wrapper {
    background: white;
    }
    That seems to have worked.

    Reply

Leave a Reply