vBulletin CMS Preview Adjustments..!

[AndyBaines]

I'm messing about with the CMS as I would like the front page (All CMS articles TBH.) looking a lil more tidy, it currently looks like...

...but would sooner it look something like...

...currently I have neither the knowledge how to make such changes (found the correct template and attempted some changes to no avail.) or the knowledge of the type of wording that would help me find the information on Google.

I'm not asking for someone to solve this for me, (Unless it's simple and quick for you.) just after advice on what to look for to learn how to make the changes.

Thank you for any help.

Andy

[HM666]

There is an option in every article to leave out the title, date, person who posted the article etc. The info you wanted left out you can leave out by simply editing the article and ticking "no" for Display Title, Display Author, & Display Published Date. That will clear the top except the categories that show. That is just to leave that stuff out completely which would just render the photo & the categories.

First before you do anything make sure you perform a database & site backup.

Second make sure you have enabled adding the template names into your source code. Login to your admincp and go to Settings > Options > General Settings > Add Template Name in HTML Comments and tick it to "yes". Save it. This will help you when you view your site in the source code to see where exactly the code is that you need to move.

To make it be just like the picture you posted you will need to do a little bit of coding in the templates. To find the template that contains the code that you need to use Firefox & make sure you have installed Firebug. This is helpful tool to see exactly where the code source is coming from and what CSS is used with it so you can search for it a little easier. If you are using a browser that already has a built in web tool, then skin that step or if you've installed FF already. Now view your home page and right click on any word or element of the post that you want to move and choose "Inspect Element with FireBug". This will give you a framed window at the bottom of your screen and it will pinpoint where the code is for that element. Copy the code (copy & paste but do not paste it yet). Go to your admincp and go to Styles & Templates > Search in Templates. Paste the code or a small portion of the code in the box at the top and then choose the style you want to work with in the drop down above the code box. Now click the "Find" button and it will bring up all the templates that have that code in it. You can go from there in moving it and styling it.

Things to remember:

1. The CMS templates are the are the vBulletin CMS Templates - the template that you will most likely need to move/change codes in will be a template that starts with vbcms_.

2. When copying the code in FireBug you get better results when only copying certain parts of the code rather than the whole thing. For instance; code for something like...

<div id="footer" class="floatcontainer footer">

Is actually better to search for "floatcontainer" by itself or "footer" either without the quotes. Do not copy and paste an entire line of code you will get no results because vBulletin uses lots of variables & code that does not come out the same or look the same in the source code. So if you get no result then try another portion of the code you are looking at instead.

3. Your page source will be your friend at times during this. To view your page source right click anywhere on the site page and choose "View Page Source". This is where the first step i had you do comes in handy. When viewing the source you can also see what the exact template is that contains the code you need to change. So use FireBug to find the EXACT code and then copy and paste that or a portion of it into your source code window and that will give you the exact template & where the code is if you cannot search for it or if you even find that way easier. Its up to you.

Hope this helps, and I'm assuming that you know HTML, some PHP & CSS in the process because you will need to know it if you are going to go about moving code around. If all of this just went completely over your head, perhaps you might look into hiring someone to accomplish these things for you. You can do so here in the Paid Requests forum.

[AndyBaines]

Wow, thank you for the informative response..!

I'll have a play later today and will hopefully come back happy.

I have some knowledge but it's all self taught from guides online, I have considered the paid requests forum but money is tight especially this close to Christmas to spend on what is currently just a hobby.

Thanks again.

[HM666]

Originally Posted by AndyBaines

Wow, thank you for the informative response..!

I'll have a play later today and will hopefully come back happy.

I have some knowledge but it's all self taught from guides online, I have considered the paid requests forum but money is tight especially this close to Christmas to spend on what is currently just a hobby.

Thanks again.

I hear ya! We all have to start somewhere. I got into this business because I ran a hobby site on vBulletin and had no money to pay someone, a few years later it has become my profession lol Let us know if you get stuck or need help.

[AndyBaines]

Right, that information has helped so much..! I never knew about turning the template names on, that's made finding bits so much easier as well as using Firefox/Firebug to inspect the elements directly, thank you again.

Now I've fiddled a little I'm going to investigate how to place elements nicely over the preview image, wish me luck..!

[HM666]

Originally Posted by AndyBaines

Right, that information has helped so much..! I never knew about turning the template names on, that's made finding bits so much easier as well as using Firefox/Firebug to inspect the elements directly, thank you again.

Now I've fiddled a little I'm going to investigate how to place elements nicely over the preview image, wish me luck..!

Good luck! No problem, glad the info helped you out.

[AndyBaines]

I'm back..! But I'm pretty sure I've made process... I think..? :P

So this is how it currently sits, which is progress in my eyes..!

...for some reason the article title is not attached right at the bottom of the image even though in my eyes it should be, I'm after the title being slightly in from the edge and the black bar background being slightly larger then the title font. This would also make the black background from the title be lower than the published on date.

I've been unable to move the created by text down with the published date/time, every time I try I just get it just below the original "by Andy" text, if anyone has a suggestion on what I need to be aware of for that also maybe..?

I have to admit I'm enjoying my time fiddling with this but end up having a few days between my time to mess with it. /doh

Thanks again for any suggestions/information on what I need to be looking for.

Andy

[HM666]

Originally Posted by AndyBaines

...for some reason the article title is not attached right at the bottom of the image even though in my eyes it should be, I'm after the title being slightly in from the edge and the black bar background being slightly larger then the title font. This would also make the black background from the title be lower than the published on date.

For this try to add some padding to the css. I assume you have css for this black transparent bar. If you do add css something to the effect of...

padding: 10px;

you may want to make it smaller or larger depending upon how large you want it.