Jump to content

Squarespace Tabs (CSS) - align center

Recommended Posts

I have a tabs plugin on my site, but I want to center the tab items, so they sit in the middle of the page. They currently sit on the left. This is the CSS code used in the header:

<style type="text/css">
.sqpl-tab-button{cursor:pointer;display:inline-block;border-bottom:0px solid black;padding:.5em 2em;margin:0;text-align:center;color:#888;position:relative;z-index:3}.sqpl-tab-button:hover{border-bottom:0px solid #000;color:#000}.sqpl-active-tab{border-bottom:0px solid #000;color:#000}.sqpl-tab-content{border-top:0px solid #d4d4d4;z-index:1}.sqpl-tab-controls{margin-bottom:-2px;z-index:2}.sqpl-tab{pointer-events:none;}.clickability{pointer-events:auto !important;};

</style>
 

Can someone help me align the tabs?

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

4 hours ago, charlineca said:

I cannot share a link, but this is how it looks. It is left aligned, but I need the titles to be in the middle centered.

Screenshot 2022-06-15 at 12.41.36.png

If you can't share link, you can contact Tabs Plugin Author to ask this.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
30 minutes ago, charlineca said:

It should just be a simple change in the css code, no?

 

Yes. I think it is simple problem if we can check url.

But is custom plugin, to replicate problem, we will need to purchase plugin, then install on test site, then check the code, then ask plugin author to refund (if he allows to refund 🙂)

 

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 6/16/2022 at 11:25 AM, tuanphan said:

Yes. I think it is simple problem if we can check url.

But is custom plugin, to replicate problem, we will need to purchase plugin, then install on test site, then check the code, then ask plugin author to refund (if he allows to refund 🙂)

 

 

Please check https://studiocote.co.

Screenshot 2022-06-18 at 11.19.08.png

Edited by charlineca
Link to comment
On 6/16/2022 at 11:25 AM, tuanphan said:

Yes. I think it is simple problem if we can check url.

But is custom plugin, to replicate problem, we will need to purchase plugin, then install on test site, then check the code, then ask plugin author to refund (if he allows to refund 🙂)

 

 

Any luck?

Link to comment
On 6/18/2022 at 4:18 PM, charlineca said:

Please check https://studiocote.co.

Screenshot 2022-06-18 at 11.19.08.png

Add to Settings > Advanced > Code Injection > Header

<style>
  .sqpl-tab-controls {
    text-align: center;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.