[SOLVED] Substitute Jpeg Image instead of a header in My commynity template

9 years 4 weeks ago - 9 years 3 weeks ago #261813 by pranaydhruv
Hello Team,

I am trying to insert a Jpeg file(heading pic)instead of the normal heading of the Module in My community template, however when i style it, it changes all header styles. Please help.

#leftmods div.module.jmoddiv H3 > mailbox (Is this the correct element?)

Thanks
Pranay
Attachments:

Please Log in to join the conversation.

9 years 4 weeks ago #261824 by krileon
Mailbox is just a string; you can't target it for a background. You have to style its actual node which is h3. So your selector would be as follows.

#leftmods div.module.jmoddiv h3

This assumes the selectors to the left of h3 are also correct as can't see them in your screenshot.


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

9 years 4 weeks ago #261838 by pranaydhruv
Hello Kyle,

that does work, but it Styles all the Headers i want to style them individually as i have a customized image for each of these.
Attachments:

Please Log in to join the conversation.

9 years 3 weeks ago #261874 by krileon
To style them individually you need to use the modules class suffix parameter to add a CSS class to it that you can specifically target with your CSS. Please review Joomla documentation carefully as it covers that. Specifically the below should be of help.

docs.joomla.org/Module_Class_Suffix
docs.joomla.org/Using_Class_Suffixes#Module_Class_Suffix (this ones a little old, but still good info)


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

9 years 3 weeks ago #261914 by pranaydhruv
Hello Kyle,

Thanks for your inputs, i added a module class Suffix and changed the font color to the same as the background which hid the text heading then added the Image as in the screenshot but for some reason it doesn't display, unable to figure out what is missing.

Thanks
Pranay
Attachments:

Please Log in to join the conversation.

9 years 3 weeks ago - 9 years 3 weeks ago #261966 by krileon
The path to your image is absolute from root instead of live. You need to actually link to the image. Example as follows.

http://www.example.com/images/logo.png

CSS files can also use relative paths. Example as follows.

/images/logo.png

Relative paths look for the image starting from the location of the CSS file. See the below tutorials and documentation for further CSS usage information.

developer.mozilla.org/en-US/docs/Web/CSS
www.w3schools.com/css/default.asp


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
The following user(s) said Thank You: pranaydhruv

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.298 seconds

Facebook Twitter LinkedIn