Home Forums Basel – Premium Template change the layout of the social media button on the default product page and css

This topic contains 7 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 4 days, 1 hour ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #234097

    Abbazhoes
    Customer

    Hello
    I ask for your help to modify the structure of the product page of the hero slider demo I will use the page that comes by default, the default since it is the one that best suits what I need but I would like to change the social media buttons to the design of the alternative option and that they are aligned to the left since they have color and are more striking, I managed to change it in google with the option to inspect element but it is HTML code and I do not know how to edit it on the real page and I would feel better if i could handle it with css as i want to change instagram icon brown color and put its original color.
    I’m using social media icons to follow

    2. another question: additionally I made some CSS changes to place elements such as sku and categories in a single line, the same I did with the wish list, share and the size guide, I don’t know very well where to place the custom CSS since it meets 3 places to place it. What is the recommended place to locate it and that when there is an update they will not get lost? They are currently in custom CSS theme settings.

    other options to locate it:
    * appearance – theme editor – style sheet
    * customizer – additional css

    thanks for your attention

    Private Content Hidden
    Attachments:
    You must be logged in to view attached files.
    #234149

    Hello,

    Thank you very much for choosing our theme and for contacting us.

    We can provide the custom CSS to set the background color, please provide product your site credentials and colors you want to set.

    Best Regards

    #234861

    Abbazhoes
    Customer

    Thanks for your reply
    I would like the social media buttons to look like the image

    Private Content Hidden
    Attachments:
    You must be logged in to view attached files.
    #234931

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .social-icons.icons-size-small li i.fa-facebook {
      width:30px;
    	height:30px;
    	margin:3px;
    	background:#375490;
    	text-align:center;
    	padding-top:8px;
    	border-radius:50%;
    	color:white;
    }
    body .social-icons.icons-size-small li i.fa-instagram {
      width:30px;
    	height:30px;
    	margin:3px;
    	background:#D61C99;
    	text-align:center;
    	padding-top:8px;
    	border-radius:50%;
    	color:white;
    }

    Best Regards

    #235471

    Abbazhoes
    Customer

    Thanks for the code!

    I added it in the indicated place Theme Settings> Custom CSS> Global: but it didn’t work, it just turned red and said that the changes were saved and it didn’t work.

    put the same code in the additional css customizer and if it worked on that part it sent screenshots of the error.

    I don’t know if there is suddenly a problem in the future for adding the css code in another place

    thanks for your attention.

    • This reply was modified 5 days, 9 hours ago by  Abbazhoes.
    Attachments:
    You must be logged in to view attached files.
    #235563

    Hello,

    Most likely you have errors above and that is why the styles do not work. Please provide correct site admin access. I cannot log in with the credentials you have provided.

    Best Regards

    #235709

    Abbazhoes
    Customer

    Hello

    Excuse me if I gave you the wrong password, here I write the correct input data I already tried them

    Thank you

    Private Content Hidden
    #235739

    Hello,

    Please provide the screen with the problem. 1. screen what you want, 2 screens what you have, and page URL.

    Best Regards

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.