Editing a downloaded html template

Hi Guys First post please be gentle.
Only a beginner and I have downloaded a template and am in process of editing it.
It’s a modern vertical scrolling website using html5 and css and I have been able to change colours and logos etc to suit myself well so far.
There is a section of the website which had a gallery you could click the links across the top and the content of the gallery would change E.g

Web design / blog/staff/ inspirations/contact/

I wanted to edit these links on my website and have simple text , maybe a few bullet points and pic under each heading.
The way I am trying to do it may be a complicated way so my first question is, what is the best way to have each one of these links display different content when clicked. Sounds simple but maybe this is not the case.
To take it further each of these links at the minute point to various elements such as “.gallery , .gallery-graphic” and I am wondering what these elemets are?
In my head I was thinking if I could find these then I may be able to edit them to allow me to add my content.
Many thanks in advance.

Hi @kezmanjacks, and welcome to the forum.

When you say you downloaded a template, is this for WordPress or another CMS, or is it for a static site?

I’m sure we can help you achieve what you want, but we’d need to see the code (HTML & CSS) which you’re using. I assume you don’t have the site on-line yet. Can you link us to a demo of your template somewhere? If not, then you can post the code here. (If you need help working out how to format code in your post, you can find it here: Forum Posting Basics - #6 by James_Hibbard)

Thanks for the reply TechnoBear

I have downloaded the template “urbanic” from the following website:


you can view the demo and actually download the files on this site too if you want to have a look.

The part i am trying to edit is the “our portfolio” section

I want to replace these gallery pics with nicely laid out text and maybe a picture, whats my best way to do this.


[quote=“kezmanjacks, post:3, topic:112080”]
I want to replace these gallery pics with nicely laid out text and maybe a picture, whats my best way to do this.
[/quote]Just to clarify, do you want to replace the entire section, so that instead of a gallery, you have text and perhaps an image or two? Or do you want to replace each image individually with text?

As it stands, the images each have a rollover effect, which shows a caption, and link to a larger image when clicked. Are you thinking of keeping this effect, or replacing it with simple text and images?

Yes id like to replace the entire section. So the gallery effect would be removed and i would just have text and a picture under each of the headings.

as it stands i can get text to appear but it is showing under all of the headings and isnt changing when i click into each heading.

OK - disclaimer: I find it much harder to adapt someone else’s code than to build things myself from scratch, so I may well be missing a better way to do things here.

Anyway, what determines which picture is shown under which heading is the class name on the <li>. e.g. gallery-graphic, gallery-design, gallery-creative

<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-design" >

So you need to include the relevant class for each entry. Does that make sense?

Ok now we are getting somewhere!

makes sense yet but my next question is how the hell do i do that! (yes i am that much of a beginner)

For example do i need to create entries in the CSS page or can i do this through html code in the index page.

What would i be expecting to write after

"<li class="

[quote=“kezmanjacks, post:7, topic:112080”]
Ok now we are getting somewhere!

In your HTML code, you need to add the class to the list item:

<li class="gallery-design"> etc.

In the template, the <li> all have multiple classes, like the example in my post above. The other classes are being used by the CSS to control the layout and display. Without knowing what alterations you’ve made, I don’t know if you require all or some of them. (If you’re not sure, an easy way to find out, of course, is simply to delete them one at a time and check if anything breaks. )

The “gallery-whatever” class is being used by the JavaScript to load the correct content for each tab, so that one must be included. (The drawback of this design is that it breaks if the visitor has JS disabled, for whatever reason.)

Thanks for your help TechnoBear!

You’re welcome.

I hope that means you have things working as you wanted.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.