Customizing the Icon 3 Demo (or any demo)

Support
#1

Hi,

I´m using this demo and I would like to know if it´s possible to make some customizations to it:

  • Adjust the percentage of the screen that the sidebar takes. It now takes about a third of the screen and I would like to reduce it to about a quarter.
  • Change the font colour for the links or text containing links on my blog posts. Both by default and when hovering over them.
  • Change the background colour of the nav bar, sidebar and footer applied by default by the theme demo.

Thanks in advance,
Carlos

#2

Hi Carlos,

Thanks for reaching out.

Sure, they are possible.

  1. Please adjust it through Theme Options > Layout and Design > CONTENT WIDTH (%), decreasing it will also increase the width of the sidebar. The total layout with is 100%, so the remaining percentage is the sidebar’s width.

  2. You can change it through Theme Options > Typography > SITE LINKS

  3. Please add this CSS to Theme Options > CSS with your preferred colors

.x-navbar {
background-color: #cccccc;
}
.x-sidebar {
background-color: #cccccc;
}
.x-colophon.top, .x-colophon.bottom {
background-color: #cccccc;
}

Hope this helps.

1 Like
#3

Hi Rad,

Thank you very much for the quick response and good tips.

  • The content width changes and CSS code lines worked perfectly, however I didn´t have much luck with the site links, which I changed to blue (normal) and pink (hover). Please find a link to my screenshot here: https://imagebin.ca/v/4TxJc8c6MW8B
  • I would also need to set the same colour for the comments box at the end of each post, which now has a white background. I would need the background to be #c4c4c4 and the lines and text to be white.
  • I noticed that the quotations that I edit from the block editor in the WP Dashboard don´t display with the correct font sizes and colours in the site. Please check out the screenshot for better clarification: https://imagebin.ca/v/4TxJN9S7r15f

By last, once the blog posts are looking good enough, I would like to take all this customizations and turn them into a Single Blog Post Template, so all the further posts take this presets by default. How should I go about it?

Again, thank you very much for the information provided so far.
I´m looking forward for your response,
Carlos

#4

Hello Carlos,

Thanks for updating in!

  1. Customizing the site links color should be done in X > Theme Options > Typography > Site Links. Did you change it already? After making any of your changes, since you are using SiteGround, could you please disable the supercacher in your hosting panel? The SuperCacher is developed by SiteGround exclusively for their customers. It increases the number of hits a site can handle and boosts the website loading speed. The SuperCacher includes 4 different caching options for maximum optimization of your websites. You can access the tool by clicking on the SuperCacher icon in your cPanel.

For more information about this, please check it out here: https://www.siteground.com/tutorials/supercacher/supercacher_intro.htm

  1. The comment section is taking the background color from the global settings. You can check it in X > Theme Options > Layout & Design > Background Options. You should be able to change the color using the color picker. If you are using Integrity, Ethos or Renew, there is also an option for your to change the background colors in X > Theme Options > {Your Stack}.

  2. Are you using the default editor or Cornerstone? Please provide us the url of the page so that we can check it.

All of the blog post items takes one same layout. All the colors and layout is set globally. Once you have customize the layout by adjusting the theme options, any new blog post will have the same look and feel.

Hope this helps.

1 Like
#5

Hi RueNel,

Thank you very much for your help.
I´m afraid that none of this tips have solved the problem. I´ll attach some screenshots so you can see what I´m seeing.

Thanks a lot,
Carlos

#6

Hi Carlos,

Please find and remove this custom CSS under Theme Options > CSS:

.format-standard a:not(.x-btn):not(.meta-comments),.format-standard h1,.format-standard h2,.format-standard h3,.format-standard h4,.format-standard h5,.format-standard h6,.format-standard .entry-title,.format-standard .entry-title a,.format-standard .entry-title a:hover,.format-standard .p-meta,.format-standard blockquote,.format-standard .x-cite {
       color: #3a2d0d;
}

To change the background color of comment box, please add this custom CSS:

.single-post .site {
     background-color: #4c4c4c;
}

Hope it helps :slight_smile:

1 Like
#7

Hi there,

Thanks again for the quick reply, I´m amazed with the quality of this support service, it is highly exceeding my expectations, so thank you for that.

The codeline to change the background colour of the comment box worked perfectly. However, I can´t find the custom CSS lines that you mentioned. Please click on the link to my screenshot, this is what I see when I open Theme Options > CSS.

https://imagebin.ca/v/4UB5BPPGWraW

Where should I find those CSS lines in order to remove them?

Thanks again,
Carlos

#8

Sorry for the confusion, Carlos. It’s not a custom CSS. It’s outputted by Standard Post Custom Colors in Theme Options > Icon.

You can disable it or change the color from there.

Hope that helps.

#9

Hi,

That wasn´t the point of my question, if you look to previous answers what I´m trying to fix is the following:

  • The content width changes and CSS code lines worked perfectly, however I didn´t have much luck with the site links, which I changed to blue (normal) and pink (hover). Please find a link to my screenshot here: https://imagebin.ca/v/4TxJc8c6MW8B1
  • I noticed that the quotations that I edit from the block editor in the WP Dashboard don´t display with the correct font sizes and colours in the site. Please check out the screenshot for better clarification: https://imagebin.ca/v/4TxJN9S7r15f

Thanks,
Carlos

#10

Hello Carlos,

  1. Please use this code:
.format-standard .entry-title a{
	color: rgb(0,125,232) !important;
}

.format-standard .entry-title a:hover{
	color: rgb(246,45,162) !important;
}
  1. The block quote’s styling were mixed with the Gutenberg styling and the theme. Please make use of this code:
.format-standard blockquote,
  .format-standard .x-toc,
  .format-standard .entry-content a.x-img-thumbnail:hover {
    border-color: transparent;
  }

Hope this helps.

1 Like
#11

Hi RueNel,

Thank you so much for providing the right code lines.
Now my blog posts look exactly how I want them to. The help provided by this support service has been amazing.

Thanks to all the team for the good service and quick replies.

Have a good week,
Carlos

#12

Glad we could always help and you’re most welcome Carlos! :wink: Cheers!

1 Like
#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.