Docs

[mulagala]

Hi,

I am wondering how to center custom social links onto the icon theme header between a left side site icon and the menu on the right. Same thing with the footer, I want it the left.

Also would be great if there were nicely formatted with spacing between the social icons. Please advise a good solution.

Many Thanks
Suresh

[Jade]

Hi Suresh,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[mulagala]

This reply has been marked as private.

[Rupok]

Hey Suresh,

Thanks for updating.

#1 & #2. It seems you have just added the icons and it’s no use without the link. Let’s add them properly within Customize > Header > Topbar Content and within footer like this :

<div class="my-social-icons">
  <ul>
    <li><a href="https://facebook.com" target="_blank"> [x_icon type="facebook"]</a></li>
    <li><a href="https://facebook.com" target="_blank"> [x_icon type="twitter"]</a></li>
  </uL
</div>

#3. It seems you are using a caching or minification plugin that’s breaking the CSS. Can you disable this and check again? Did you change the template using Child Theme?

#4. You can add this under Custom > CSS in the Customizer.

.single-post .entry-featured {
  margin: 3% auto 0;
  max-width: 800px;
}

Let’s change the max-width value to control the size.

Cheers!

[mulagala]

This reply has been marked as private.

[Joao]

Hi There,

Please clarify what is the content you want to keep. Some of your content(most of it) is stored on the database not on the Child Theme, so if you do that you will lose it.

Please clarify: What are the contents you want to keep so we can provide you the instructions.

Thanks

Joao

[mulagala]

Hi Joao,

I want to keep my posts, custom css (which is tiny so no issues) and my essential grid if possible or I will redo it again.

Many Thanks
Suresh

[Friech]

Hi Suresh,

I did check the site and I think there is no need for rebuilding the site from scratch. Just deactivate or completely delete the plugins that you’re not using anymore (e.g. Fusion Builder, Fusion Core, WPBakery Visual Composer, etc.) Or try to deactivate all the plugins (except Cornerstone) and then lets arrange your “custom social links on header” before we activate back the plugins that you only need.

Another thing, I am seeing images that is pointing on the localhost, one of that is your logo (maybe you did not migrate this site properly). Please re-set all those images, make sure they are pick from your media library.

Once we clear your plugins and re-set the missing images, we should good to go to do your request.

Thanks.

[mulagala]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in!

#1] After careful investigation, it turns out that your custom css affects the comments section. Please see the image below:

To resolve this, please add the following css code:

body li.comment {
    text-indent: 0;
}

#2] To align the social share buttons below the video to the right, you can make use of this code:

body .addthis_toolbox {
    width: auto !important;
    display: inline-block;
    float: right;
}

#3] That is because you did not set the navbar top height in the customizer (Appearance > Customize > Header > Navbar > Navbar Top Height (px)). It should be set at least the same height as your navbar which is 78 pixels. I went ahead and added some value in the option already.
http://prntscr.com/eawzk0

#4] Simply edit your menu and manually add the social icons with the profile links instead. To know how you can customize the menu, please check this out: https://community.theme.co/kb/wordpress-custom-menus/

And to know how you can add icons in the menu, please check out this thread: https://community.theme.co/forums/topic/adding-icons-to-the-menu/

#5] Regretfully we cannot support any modifications to the header other than minor cosmetic changes due to the fact that X is a highly dynamic theme with many elements being constructed on the fly based on options in the Customizer. Among these, the header is one of the more complex elements of the theme and structural modifications to it will likely lead to numerous layout problems as there are a lot of things to take into consideration because of X’s responsive nature. Taking all of this into consideration, these types of updates are out of the scope of our support as their involvement is simply too great and we are a very small team. While we would love to be able to assist all of our users with every customization request, the simple reality is that we cannot cater to every inquiry. Additionally, we will not be able to support any issues that might arise from modifications made to this area on your own.

Thank you for your understanding.

[mulagala]

Hi Rue Nel,

First of all thank you for your extraordinary support.

issue #1: sorry my bad, I tried to implement style on the bullet point numbers in the post. I appreciate the work around for the comment section. I want to remove the breaking css so that the comment box will work by default and can you suggest a css what will implement bold on the bullet point numbers. Also can I change the default dot format for the bullet points of the ingredient list, could you kindly help on that please.

issue #2, #3 and #4, thanks a lot, solutions are great.

issue #5, appreciate the advise. I was wondering if I can get basic menu bar shrinking with ease. I can see a lot of people got help on the same thing when I googled them, similar to this

https://community.theme.co/forums/topic/need-to-create-header-that-changes-as-you-scroll/

I tried the above support post but couldnt get it working.

Was wondering if I can get the functionality, in just the header styling. I can see basic jquery is simple when top scroll>50 and unable to sort out the css including easing. The exact functionality im looking for for header example: http://themes.semicolonweb.com/html/canvas/index.php

or this is more better

http://bergamotadesign.com/como-fazer-o-seu-e-book/

Many Thanks.

[mulagala]

Hi Rue Nel,

With regards to issue #5, I had asked help in the related thread

https://community.theme.co/forums/topic/jquery-sticky-header-that-shrinks-when-scrolling-down/page/5/#post-1378618

and I am being helped there. Just to let you know so you can ignore this issue here.

Kindly let me know the solution for only the issue #1.

Many thanks.

[Nabeel A]

Hi again,

To change the dot format you can modify the following code and add it to your Customizer, just change the dot in the code to something you like:

ol > li:before {
    content: counter(item) ".";
}

The bullet numbers are already bold. You can change the font size of the bullet numbers:

ol > li:before {
    font-weight: 900 !important;
    font-size: 25px !important;
}

To fix the formating, make sure to add this in your Customizer:

ol > li {
    text-indent: 0 !important;
}

Let us know how this goes!

[mulagala]

Hi Nabeel,

Just to let you know I had already removed previous formatting as it was breaking the comments section. Thats what I was saying in my previous comment.

I added your css in the custom css section and it wont make any difference.

I was wanting css formatting separately for this bullet points (a symbol for the ingredients list & bold numbers for the method list).

Many Thanks
Suresh

[Joao]

Hi There,

To add an icon or an image to the Ingredient lists, please remove:

ol > li:before {
    content: counter(item) ".";
}

And add:

ul > li:before {
    content: counter(item) ".";
}

To make the numbers bold, please add:

ol > li:before {

    font-weight:bold;
  
}

Hope it helps

Joao

[Author]

Posts