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

[LiefdeApparel]

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?

 

 

[devmont-digital · 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;
}

[devmont-digital · 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;
}

[LiefdeApparel]

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!

  

[LiefdeApparel]

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

[devmont-digital]

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;
}

[LiefdeApparel]

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 · 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;
}

[staceyp55]

Hi,

I would like this exact title style: horizontal line before and after the collection titles. When I entered the code, nothing happened? Am I supposed to be able to access it somewhere b/c nothing changed and there's no option to select this style after adding the code to the bottom of the base.css.

[devmont-digital]

Hello @staceyp55 ,
Can you please share the url or of your store