- This topic has 7 replies, 2 voices, and was last updated 3 years, 9 months ago by David.
-
AuthorPosts
-
June 5, 2020 at 6:15 pm #1316294Mark
Trying to set a small svg as the custom image for the background inside an ‘element’ Global Page Header. The current template has a large jpg picture, too heavy, sitting under a gradient. I’d like to use a lightweight svg and have its opacity turned down so as not to push through the gradient too much, and have it repeat across the screen. And set the size. Ideas?
I presume I’d have to target this background image with CSS and change the opacity and image repeat, eg:
opacity: 0.3; background-repeat: repeat-y;
but since the chrome inspector cannot see the background image and always shows the gradient instead, I’m flummoxed. Page here: https://gpsites.co/service/style-guide/
Edit: Aha! I find that you CANNOT adjust a background image’s opacity, worse luck, but I simply got the svg into Illustrator and adjusted it there.
Now for the size and repeating:
background-repeat: repeat-y; background-size: 300px 100px;
But what’s the class?
June 6, 2020 at 3:35 am #1316589DavidStaffCustomer SupportHi there,
you would target:
.page-hero { /* styles for background */ }
June 6, 2020 at 6:51 pm #1317417MarkHmm, does not work when added to Customise ‘Additional CSS’ section as
.page-hero { /* styles for background */ background-size: 200px 200px; background-position: right bottom; background-repeat: repeat-x; }
Also does not work if added, as DevTools suggests, as
.page-hero.gradient-overlay
However, I can get it to work if I directly edit .page-hero properties using DevTools, so I know it’s possible. But as usual, the difficulty seems to be getting separately composed styling to apply to something.
I also tried this, but it did not work:
.page-hero { background-size: 200px !important; background-repeat: repeat !important; }
(but it does work in DevTools)
I also added a special class into the Global Header Element, but even though DevTools lists the class on the page hero, it is not enacted. Stumped.
Note: this is the site header background I am targeting: https://gpsites.co/service/style-guide/June 7, 2020 at 5:25 am #1317795DavidStaffCustomer SupportCan you link me to your site with your latest CSS added so i can see what the issue is ?
June 7, 2020 at 3:10 pm #1318429MarkDave, I was able to get this to work, but only when I added the CSS into an actual page (using Simple CSS plugin), not into the general Customise additional CSS section.
.page-hero.gradient-overlay { background-repeat: repeat; background-size: 200px 200px; }
Maybe this highlights a possible design flaw in the GB theme: the Elements, with their CSS, appear to be injected later in the cascade than the ‘additional CSS’ from the Customise section, thus overriding them. This would not be a problem if the Elements allowed for the inclusion of more options, such as the ones I’m trying to manipulate.
From my POV, adding the CSS into every page is not a viable solution.
As far as a link to my site, I am using the template (link above) with almost no modifications yet, so using that template is the same as using my site.
At this stage I’m thinking of giving up here and just using a big jpeg in the hero.
June 8, 2020 at 3:15 am #1318861DavidStaffCustomer SupportGP generates an inline style element called
generate-style-inline-css
. This includes any of the CSS generated by customizer and by a header element.
The Customizer > Additional CSS is injected inline towp-custom-css
which comes after the GeneratePress styles.So if the above CSS isn’t working then it is either because of specificity, some broken CSS before it or something like a cache plugin is messing within the order.
June 8, 2020 at 3:48 am #1318896Mark… some broken CSS…
Bingo! Brilliant, David. I went through the Customize Additional CSS and found a missing
}
, probably due to fat finger.That’s why it worked when placed in the Simple CSS section, it was not preceded by a glitch there. 😖
Lesson learned. When CCS won’t work, check syntax of code above, even if that code appears to be working.
June 8, 2020 at 4:50 am #1318966DavidStaffCustomer SupportGlad to hear you found the issue !
-
AuthorPosts
- You must be logged in to reply to this topic.