WordPress Tricks

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

allaboutbasic

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.

You can take my personal help in skype : om2000_cuet

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


<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


You can take my personal help in skype : om2000_cuet

Published by allaboutbasic

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

    Like

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

    Like

    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!

    Like

    Reply

      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

        Like

  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!

    Like

    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

      Like

      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!

        Like

      3. In IE the sign/mmissing sign is gone.

        But it still displays a “missing sign” in chrome

        And on my mobile the sign still shows:

        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

    Reply

  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

    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

      Like

      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!

    Like

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

    Like

    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

      Like

      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

    Like

    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

        Like

      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

        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

    Reply

  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

    Like

    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?

        Liked by 1 person

    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

      Like

      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?

        Like

  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?

    Liked by 1 person

    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

      Like

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

        Like

    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

      Like

      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.

    Like

    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?

    Like

    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.

        Like

  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!

    Like

    Reply

      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!

        Like

  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.

    Like

    Reply

  45. I just published again.
    I tried using:

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

    Like

    Reply

Leave a comment