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

Support Themes & Styling
,
1

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:

2

@citoyencandide,

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.
Fix:

  • 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:
    <li>Client:
    <strong><a href="{{ portfolio.clientUrl }}">{{ portfolio.client }}</a>
    </strong>
</li>
<li>Date:
    <strong>{{ portfolio.projectdate }}
    </strong>
</li>
<li>Service:
    <strong><a href="{{ portfolio.categoryUrl }}">{{ portfolio.category }}</a>
    </strong>
</li>

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
2 Likes
3

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 …

4

@citoyencandide, Try the following inside custom.css:

section#contact h2 {
    color: red
}
5

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 ^^

6

@citoyencandide,

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.

7

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 { 
  color:#968052
}
.navbar-default .nav li a {
  font-weight: 600
}
section#team h3 {
margin-bottom: 15px
}

this is just starting to be funny !

now another topic