Solved

How do I add a 1 px horizontal line on both sides of a centered title shopify dawn theme?

LiefdeApparel
Excursionist
18 3 1

I am wanting to add a 1px horizontal black line to the right and left sides of the centered title in my multicolumn section here. I have attached a picture below of what it looks like now, and what I want it to look like. Also, how do I add a 1px border around the individual categories in each column?

Screenshot 2024-03-12 at 1.37.07 PM.png

Screenshot 2024-03-12 at 1.37.22 PM.png

Accepted Solutions (2)

devmont-digital
Shopify Partner
96 23 21

This is an accepted solution.

Hello @LiefdeApparel,

Try this code

 

Navigate to Online Store -> Themes -> Edit Code. Then, go to the search bar and find the file base.css. Afterward, scroll to the bottom of the page and paste the code. The design will be implemented.

 

.title-wrapper-with-link{
  display:block;
  text-align:center;
}
.title-wrapper-with-link h2.title.inline-richtext.h2 {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.title-wrapper-with-link h2.title.inline-richtext.h2:before, .title-wrapper-with-link h2.title.inline-richtext.h2:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 48%;
    height: 1px;
    content: '\a0';
    background-color: #cccccc;
    margin-left: 2%;
}
.title-wrapper-with-link h2.title.inline-richtext.h2:before {
    margin-left: -50%;
    text-align: right;
}

.multicolumn-card__info {
    padding: 1rem 2rem !important;
    border: 1px solid;
}

 

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io

View solution in original post

LiefdeApparel
Excursionist
18 3 1

This is an accepted solution.

Hi, disregard! I played around a bit and made it work. Here it is for anyone else who needs it - 


.collection__title.title-wrapper {
display: block;
text-align: center;
}
.collection__title.title-wrapper .title.inline-richtext.h2 {
position: relative;
z-index: 1;
overflow: hidden;
}
.collection__title.title-wrapper .title.inline-richtext.h2:before, .collection__title.title-wrapper .title.inline-richtext.h2:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 48%;
height: 1px;
content: "\a0";
background-color: #0F0A47;
margin-left: 2%;
}
.collection__title.title-wrapper .title.inline-richtext.h2:before {
margin-left: -50%;
text-align: right;
}

View solution in original post

Replies 6 (6)

devmont-digital
Shopify Partner
96 23 21

This is an accepted solution.

Hello @LiefdeApparel,

Try this code

 

Navigate to Online Store -> Themes -> Edit Code. Then, go to the search bar and find the file base.css. Afterward, scroll to the bottom of the page and paste the code. The design will be implemented.

 

.title-wrapper-with-link{
  display:block;
  text-align:center;
}
.title-wrapper-with-link h2.title.inline-richtext.h2 {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.title-wrapper-with-link h2.title.inline-richtext.h2:before, .title-wrapper-with-link h2.title.inline-richtext.h2:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 48%;
    height: 1px;
    content: '\a0';
    background-color: #cccccc;
    margin-left: 2%;
}
.title-wrapper-with-link h2.title.inline-richtext.h2:before {
    margin-left: -50%;
    text-align: right;
}

.multicolumn-card__info {
    padding: 1rem 2rem !important;
    border: 1px solid;
}

 

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
LiefdeApparel
Excursionist
18 3 1

Thank you , this worked! Last question, is it possible to do the same for these collection list sections? I have attached a picture of what it looks like now and what I'd like it to look like. Thanks!

 

Screenshot 2024-03-22 at 11.37.09 AM.png

Screenshot 2024-03-22 at 11.37.53 AM.png

  

LiefdeApparel
Excursionist
18 3 1

@devmont-digital Just checking in if you have a solution here? Thanks!

devmont-digital
Shopify Partner
96 23 21

Yes, it's possible. Try this code.

.title-wrapper-with-link {
  display: block;
  text-align: center;
}
.title-wrapper-with-link .collection-list-title.inline-richtext {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.title-wrapper-with-link .collection-list-title.inline-richtext:before,
.title-wrapper-with-link .collection-list-title.inline-richtext:after {
  position: absolute;
  top: 51%;
  overflow: hidden;
  width: 48%;
  height: 1px;
  content: "\a0";
  background-color: #cccccc;
  margin-left: 2%;
}
.title-wrapper-with-link .collection-list-title.inline-richtext:before {
  margin-left: -50%;
  text-align: right;
}
Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
LiefdeApparel
Excursionist
18 3 1

Sorry @devmont-digital it's actually a "featured collection" not a collection list. I changed the code to what i have added below, and the title is centered now but the lines are not showing. can you please check my code? :

 

.collection__title.title-wrapper {
display: block;
text-align: center;
}
.collection__title.title-wrapper .featured-collection-title.inline-richtext {
position: relative;
z-index: 1;
overflow: hidden;
}
.collection__title.title-wrapper .featured-collection-title.inline-richtext:before, .collection__title.title-wrapper .featured-collection-title.inline-richtext-richtext:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 48%;
height: 1px;
content: "\a0";
background-color: #0F0A47;
margin-left: 2%;
}
.collection__title.title-wrapper .featured-collection-title.inline-richtext:before {
margin-left: -50%;
text-align: right;
}

LiefdeApparel
Excursionist
18 3 1

This is an accepted solution.

Hi, disregard! I played around a bit and made it work. Here it is for anyone else who needs it - 


.collection__title.title-wrapper {
display: block;
text-align: center;
}
.collection__title.title-wrapper .title.inline-richtext.h2 {
position: relative;
z-index: 1;
overflow: hidden;
}
.collection__title.title-wrapper .title.inline-richtext.h2:before, .collection__title.title-wrapper .title.inline-richtext.h2:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 48%;
height: 1px;
content: "\a0";
background-color: #0F0A47;
margin-left: 2%;
}
.collection__title.title-wrapper .title.inline-richtext.h2:before {
margin-left: -50%;
text-align: right;
}