Documentation

IMPORTANT

This is the outdated SI-documentation which will be adapted soon. A huge part may be obsolete!

Css Overriding

CSS Overriding

Creating CSS override in EasyBlog is almost identical as template overriding. To begin, navigate to EasyBlog > Themes > Custom Css option at EasyBlog backend. You should see the Custom CSS Editor.

Terms and Conditions

Please read our Support Policies before requesting assistance for customization.

Please make sure that you have backup all your customization and it must be up-to-date with the latest EasyBlog before updating to the latest version.

Rest assure that this CSS overrides will not be overriden by EasyBlog upgrades. However, it is a best practice to backup your entire site before proceeding with upgrades so that if anything went south, you'll be able to revive back your site.

Examples

Lets start adding some CSS override. Assuming you would like to Latest Blog Module, you can add this CSS override.

#eb.mod_easybloglatestblogs {
    background-color: #ffa;
}

Here is another CSS example. Assuming you would like increase the blog font.

#eb .eb-entry-article .ebd-block p {
  font-size: 20px;
}

Here is another CSS example. Assuming you would like to hide the title for each blog post, you can simply add this CSS in the editor.

#eb .eb-entry-head .eb-entry-title{
  display: none !important;
}

Once you have added your custom CSS, click on Save button to store it. Your custom CSS code will be stored in the following path.

/templates/yourtemplate/html/com_easyblog/styles/custom.css

Ordering

All custom CSS placed within this file will have the highest ordering. EasyBlog will prioritize this file before fallback to the default theme CSS located within the component.

Please make sure that your CSS overrides are defined correct in order for it to be working correctly. You can learn and explore more on CSS at W3Schools.