[Agency] Issue changing pictures and other things with Inherited method

Hello Everyone !

I’m new to grav and site editing …

As my Pro page hosted for free by framasoft is about to be closed on the 6th of July, I managed to find another host : bee.home

So, long story short, I had to learn grav for this !

I choose Agency skeleton, and after several try, being able to change the header image and the one in the contact module, I’ve décided to set a brand new mytheme following the inherited method.

I was able to display my logo as explained here

I also put my brand images in user/themes/mytheme/img folder

but they don’t seem to be catch …

any clue ?

I’m also looking for tips

  • changing the ref url in portfolio (all pointing to bootstrap.com)
  • modding colors of ## titles in contact
  • modding color of top header, when scrolled down
  • changing bottom mentions Copyright © Mysite 2014 / Privacy Policy label and url / Terms of Use label and url

Thank in advance for any help :slight_smile:


Change header image:
The image is set in css and is a relative url : url(../img/header-bg.jpg). Relative to the css file in which it is used.

  • In your inheriting theme, create file: css/custom.css
  • Add the following css:
    header {
      background-image: url(../img/header-bg.jpg);
    Now, url(../img/header-bg.jpg) will be relative to the css file in you theme and hence will pickup the image in /img/header-bg of your theme.

changing the ref url in portfolio

  • Open file '/user/pages/01.home/_portfolio/portfolio.md`
  • For each portfolio entry, add clientUrl: https:/clientdomain.com and categoryUrl: /path/to/page/describing/your-service-category.
  • Copy file /user/themes/agency/templates/modular/portfolio.html.twig into you own theme using same path.
  • Edit portfolio.html.twig and replace lines 49-60 with for example:
        <strong><a href="{{ portfolio.clientUrl }}">{{ portfolio.client }}</a>
        <strong>{{ portfolio.projectdate }}
        <strong><a href="{{ portfolio.categoryUrl }}">{{ portfolio.category }}</a>

moding colors of ## titles in contact

  • Edit custom.css inside your theme and add:
    #contact label {
        color: red;

moding color of top header

  • In custom.css add:
    .navbar-default.navbar-shrink {
       background-color: red;

changing botom mentions

  • Copy template footer.html.twig from theme Agency into your own theme using same folder structure.
  • Edit line 5

Hello all,

A very special thank you to @pamtbaau for this accurate and very helpful response !

It did almost all the job ^^

I still have issue with the contact part of this theme/skeleton :slight_smile:
I put

contact {
  background-image: url(../img/map-image.png);

in my custom css but it didn’t worked

I was not clear enough, i apologize.

what I mean with ## titles is the markdown text formatted in the contact.md file …

@citoyencandide, Try the following inside custom.css:

section#contact h2 {
    color: red

Yes, it worked :slight_smile:

I found where to change the label and URL : user/config/site.yaml and the quicklinks are at the bottom of the file

still strugling with the map-image in the background of contact/form …

my final touch would be having a diaspora* icon in the social part of the footer ^^


still strugling with the map-image in the background of contact/form

If you open de devtools in the browser and inspect the element containing the image, you will find in the css inspector :

section#contact {
    background-color: #222;
    background-image: url(../img/map-image.png);
    background-position: center;
    background-repeat: no-repeat;

Use the same trick as for the header background.

ok, this worked !

thank you ^^

I’m now trying to highlight my span-copyright in the footer …

thanks to your explanation, I managed to modify the text color !

I also managed to change the size of the navbar text and the size of the margin between two h3 :slight_smile:

footer span.copyright { 
.navbar-default .nav li a {
  font-weight: 600
section#team h3 {
margin-bottom: 15px

this is just starting to be funny !

now another topic