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.
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)
[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?
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
[quote=“kezmanjacks, post:7, topic:112080”]
Ok now we are getting somewhere!
[/quote]Excellent!
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.)