0

I am trying to modify a woocommerce website and I have very little HTML/CSS training. Most of what I've learned has come from trial and error, some online tutorials, playing around with the developer console in Chrome, etc....

I'm trying to add an image border to the top of a page header right before an area called tg-container. I was able to put one below it, using an existing class, whose info I didn't need to see. Can it be done with the Additional CSS interface built into the theme or do I have to go into the style.css and html to create the boarder? I know the benefit of the Additional CSS interface is having no need to edit the theme files directly whenever the theme is updated.

Bypass Page

Example Page with border - accessible only after bypass page is visited

IMAGE: Example page with Chrome Developer Console open and showing code for area

-------------------- Further Experimentation-------------------------

I created a child theme and am trying to add it that way, but I am missing something (because I'm not a coder), I was able to create the area for the image, but the image isn't showing up. I've tried adding it in the child theme and in the parent theme (editing style.css and page.php).

In the page.php of the child (and the parent) (after the following)

<div class="page-header clearfix">
            <div class="tg-container">

I added

<h3 class="title-border"> </h3>

I've tried this in the style.css of the child:

/*Add Wycinanki Borders*/

.title-border {
  background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
  background-repeat: repeat-x;
  font-weight: 600;
  color: #3b3b3b;
  font-size: 14px;
  line-height: 30px;
  margin: 5px 0;
}

I've tried this in the style.css of the child:

/*Add Wycinanki Borders*/

.page-header .title-border {
  background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
  background-repeat: repeat-x;
  font-weight: 600;
  color: #3b3b3b;
  font-size: 14px;
  line-height: 30px;
  margin: 5px 0;
}

I've tried this in the style.css of the parent:

.page-header .title-border {
        background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
        background-repeat: repeat-x;
        font-weight: 600;
       color: #3b3b3b;
    font-size: 14px;
    line-height: 30px;
    margin: 5px 0; }

Again, it has created the space for the image, but the image isn't showing up. I copied the other attributes from the "entry-sub-title", where I was able to put the image successfully, thinking that they would be styled the same way.

Thanks for any insight and helping me learn what I'm doing, hahaha.

2
  • Can you use the chrome developer console to find the <h3 class="title-border"> </h3> element on the page and see how big it is? I'd guess it's too small to see any visible background in, and has possibly been collapsed down to nothing since it only has whitespace in it. Why h3, why not something else for the background?
    – Rup
    Aug 3 '20 at 0:45
  • I was merely copying the info from entry-sub-title, the area that I was able to add the same border below the page title (aka entry-title): <br/> <div class="tg-container"> <h3 class="title-border"> </h3> <h1 class="entry-title">Contact</h1> <h3 class="entry-sub-title"><div id="crumbs" xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="https://store.dolina.org/pl/">Home</a></span>&nbsp;⁄&nbsp;<span class="current">Contact</span></div></h3> </div>
    – Kazimierz
    Aug 3 '20 at 12:18
1

Ok, I got it figured out. I added <div class="title-border-top"> </div> above the page title (and actually added <div class="title-border-bottom"> </div> below for future modification.

I then added the following in the Additional CSS:

.page-header .title-border-top{
    background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
    background-repeat: repeat-x;
    height: 30px;
            margin: 10px;
}

It is working and I hide the entry-sub-title I had taken over for the border to begin with. Now I have to figure out which page templates WP is pulling for all the main pages, so I can add the html to them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.