Joomla Templates Club 406,261 posts

[learnthrusong Friend learnthrusongJoin date: May 2011Posts: 20Downloads:22Uploads:1 Thanks: 6]

#201505

Hi there,

I’ve been using JA templates for years now and I’ve never really had any problems customising them to suit my needs – so THANK YOU for your awesome work! However, I am trying to make a few small tweaks to JA Smashboard and have run into a few little issues and I would appreciate some advice/pointers with…

I would like to make a few alterations to the CSS in order that I can:
1. Display the full height and width of my square images
2. Push the Title, Intro text and article details below the image
so that the entire image can be seen. For not, my images are square.

I can see that I need to change the div that wraps the image height property from 50% to 100% in order to achieve step 1 however, when I do this, when I view on a small screen, it ends up shrinking the viewable image area.

Also, when on a tablet -> large screen, it ends up pushing the title and intro text off, onto the main background.

This is the problem for me really, I am a strong PHP dev but my knowledge of advanced CSS3 is somewhat limited by comparison!

Please, could any CSS whizz kindly point me in the right direction of the relevant CSS classes that I need to alter in order to achieve these small changes? I appreciate that some will be in template.css and others will likely be in template-responsive.css and the changes I make would be best placed in a custom.css file that I am already attempting to work in.

Many thanks in advance!

Kind Regards,

Gez

[learnthrusong Friend learnthrusongJoin date: May 2011Posts: 20Downloads:22Uploads:1 Thanks: 6]

#550415

BTW, I’m really happy to trade a little php dev time with the CSS whizz that can help with this! I’ve no problems with developing J! extensions but I really suck at CSS…:-[ So, if you’re stuck coding any user/content plugins or a module or something like that, maybe we can trade a little time? 🙂

Thanks in advance!

Gez

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#550441

Hi Gez,

Could you post your site’s URL here and illustrate the modifications you expect via screenshots? It will help to assist you better.

Best

1 user says Thank You to Saguaros for this useful post

1. learnthrusong

[learnthrusong Friend learnthrusongJoin date: May 2011Posts: 20Downloads:22Uploads:1 Thanks: 6]

#550522

Hi Saguaros,

Thanks for your reply! I just came back here by chance – I haven’t had an email to notify me – so I’m about to check my spam 🙂

OK, screenshot of what I’m aiming for attached:

Further info:
For note, I have duplicated the blog layout and named it products. Therefore, the layout files that are being used at present are products.php and products_item.php. I’m reluctant to post a url to the site here as it is my local development environment. If you need it at some point, please let me know and I can PM you the link.

They are completely untouched for the moment in that they are exact copies of the blog.php and blog_item.php in readiness for me to add a few extras in there later – for example see ‘E’ below.

Here are a couple of notes to go with the image:
A. The ‘whitespace’ in the header has been shrunk to tighten up the item title
B. The images that I am using in this layout are always square – fullsize at 830px x 830px.
C. The intro text has been tightened up to accommodate a max of 4 lines.
D. Article details pushes right to the bottom
E. I will be adding a button to the layout that I would like to position over the article image. I’m only mentioning this as I wanted to check, will the CSS definition for the image wrapper therefore need to be positioned absolute in order for me to achieve this?

Questions:
1. RE: ‘E’: In my initial tests, clicking any button, added anywhere within the <article> would trigger the popup. How can I avoid this? For example, in ‘E’ above, I need the the user to be redirected to a customised contact page that I’m currently working on. This only seems to work if I use an <a> tag with a class of btn however, I would prefer to use buttons as they already have defined styles within the template that I’m happy with. Any advice on this would also be greatly appreciated!

2. RE: The CSS overrides, since I don’t want to override any of the standard article layouts, would you advise prefixing or suffixing the CSS class so that I can make them more specific? If so, please could you also point out the best approach to doing this? I mean, would adding an additional class name in the $iclass variable of the layout suffice?

Thanks in advance!

Gez

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#550825

Hi Gez,

<blockquote>1. RE: ‘E’: In my initial tests, clicking any button, added anywhere within the <article> would trigger the popup. How can I avoid this?</blockquote>
It would be better if you posted (or PM me) the URL of page where you have this button, I will take a look

With the CSS overrides, could you tell me more specific of how you want to custom CSS so that I can suggest further? This template is based on T3 framework so you can follow this documentation for how to customize CSS: http://t3-framework.org/documentation/bs3-customization#custom-css

1 user says Thank You to Saguaros for this useful post

1. learnthrusong

[learnthrusong Friend learnthrusongJoin date: May 2011Posts: 20Downloads:22Uploads:1 Thanks: 6]

#550837

Thanks Saguaros,

Just PM’d you the URL.

Many thanks,

Gez

[learnthrusong Friend learnthrusongJoin date: May 2011Posts: 20Downloads:22Uploads:1 Thanks: 6]

#550839

ADD…

RE The CSS overrides – well, basically, I don’t want to just change the ‘standard’ smashboard classes if possible in order that I can maintain the standard look and feel in other category blogs etc. I have created a custom layout (dupe of the blog_item.php) for the moment so I was wondering, would you advise suffixing or prefixing all of the classes that I need to override?

Alternatively, I could have a different ‘overrides.css’ file containing the necessary overrides that I only load in the custom layout. This would also work and I guess be a bit easier, right?

Thanks,

Gez

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#550960

Hi Gez,

Could you please check your site’s URL again as I still can’t access it?

And with the override css, as I mentioned above, this template supports to load custom.css automatically when your site is loaded and it will help to keep custom css code.

[learnthrusong Friend learnthrusongJoin date: May 2011Posts: 20Downloads:22Uploads:1 Thanks: 6]

#551032

<em>@Saguaros 447607 wrote:</em><blockquote>Could you please check your site’s URL again as I still can’t access it?</blockquote> Done – just PM’d you
<em>@Saguaros 447607 wrote:</em><blockquote>And with the override css, as I mentioned above, this template supports to load custom.css automatically when your site is loaded and it will help to keep custom css code.</blockquote>Yes, sure… I’ve already created this file however, I want to avoid overriding all content pages and only override 1 custom layout that contains all of the same class names. For this reason, I wondered whether it would be best to just load an ‘override.css’ in that layout, to avoid applying the defined CSS to other layouts.

Anyway, thanks again! Hope you should be able o access the site now.

Kind Regards,

Gez

[learnthrusong Friend learnthrusongJoin date: May 2011Posts: 20Downloads:22Uploads:1 Thanks: 6]

#551036

Hi again,

Just to let you know that I worked out what the problem was with you being unable to access the site. I’ve had to do a bit of ‘jiggery pokery’ with my new router’s port forwarding as it isn’t as straight-forward as with previous one. All sorted now so you can access via the link I PM’d you.

Many thanks,

Gez

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#551117

Hi Gez,

Thanks for the update, I can access your site now.
<blockquote>
In my initial tests, clicking any button, added anywhere within the <article> would trigger the popup. How can I avoid this?
</blockquote>
When I open an item in your site such as: Mini Daffodils Coloured Yellow , I see buttons for Next and add to cart from j2store component, do you mean this button? How you want to achieve with this?

<blockquote>I want to avoid overriding all content pages and only override 1 custom layout that contains all of the same class names.</blockquote>

If that layout is assigned to specific page, you can add page class suffix for that page and add CSS style with that class: http://docs.joomla.org/Using_Class_Suffixes . This way will help to add style for specific page without affecting others.

1 user says Thank You to Saguaros for this useful post

1. learnthrusong

[learnthrusong Friend learnthrusongJoin date: May 2011Posts: 20Downloads:22Uploads:1 Thanks: 6]

#551158

Brilliant – Thanks!

Any advice on the specific classes that I need to override inorder to achieve my desired layout?

Thanks,

Gez

[learnthrusong Friend learnthrusongJoin date: May 2011Posts: 20Downloads:22Uploads:1 Thanks: 6]

#551159

BTW, RE: Buttons – I want to make those available over the item image as per image I posted (http://www.joomlart.com/forums/topic/css-changes-to-slightly-alter-the-category-blog-layout/#post-550522)

Thanks again,

Gez

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#551282

Hi Gez,

<blockquote>Any advice on the specific classes that I need to override inorder to achieve my desired layout?</blockquote>
It will depend of which layout you’re using and how you want to change. You can see which class you need to change easily by using Inspect Element in Google Chrome or Firebug in Firefox. What I usually do is set Compress CSS in Template manager to No, then hover on any element you want and right click on it and then click on inspect element, it will show you which CSS class it is using and which CSS file and the path to this element on the right side

<blockquote>RE: Buttons – I want to make those available over the item image as per image I posted </blockquote>
With all due of respect but I’m still not so clear of how you want to show button in article, could you send me screen of how it should be?

[Author]

Posts