Is there a way to assign a unique background color to the menu title based on each menu item or the specific article being viewed?

I've been working on a Joomla 2.5 based website and have a submenu with a title at the top, displaying the name of the top menu category. The title currently has a background color, but now I want to have a different background color for the title on each page I open.

One solution I considered was creating an extra menu module for each menu item with a specific color defined in the CSS. However, I realized I would have to rename each module to avoid having the same name twice. The challenge is that I need the title to remain the same as the Topmenu category for all submenu items.

Here is the basic structure of the generated code:

    <body>
    <div id="content">
    <div id="breadcrumbs"></div>
    <div id="main" class="centerAndRight"></div>
    <div id="right">
    <div class="moduletable_servicemenu">
    <h3>HERE IS THE TITLE</h3>
    <ul class="menu"></ul>
    </div>
    <div class="moduletable_kontaktmodul"></div>
    </div>
    </div>
    <!-- end content -->
    <div id="overallfooter"></div>
    </body>

If anyone has any ideas or suggestions, please feel free to share. Thank you in advance.

Answer №1

If you assign a specific class to the title element (for example, class="title"), and then assign different classes to the body tag of each page (for example, <body class="contact">), you can easily customize the style of the title on each page. This can be achieved by using CSS rules like:

.contact .title {background: red}
.about .title {background: blue}

Answer №2

I created a unique script to generate random colors, allowing you to easily customize it based on your preferences. The script is designed to select colors randomly and can be adapted to include as many different colors as you like.

$(document).ready(function() {
    var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00' /***add more colors as needed***/];

    $(".CustomCategory").each(function(){
    $(this).css({'background' : ' + colors[Math.floor(Math.random() * colors.length)] + ')'})
    });

 });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure the snackbar occupies the full width on smaller screens?

After reviewing this commit: https://github.com/callemall/material-ui/commit/11695dcfa01e802797115d42c6d3d82d7657b6ab#diff-e9014062cd8e3b4344ab619966f35ef2 In the latest update, the snackbar no longer expands to 100% width on mobile screens. Can someone p ...

Error message: The color shade "100" is not in the color palette. The only available shades are primary, accent, and contrast

I am in the process of upgrading from Angular 12 to 13. Encountering this error, and so far I haven't been able to find a solution for it. Could someone please guide me in the right direction? Here is my package.json file: { "name": &quo ...

Arranging elements within the flex container in perfect alignment

I'm stuck trying to figure out how to adjust the layout of a flex container with three child elements. Here is the code I'm working with: html,body,div {margin:0;padding:0;} .cont { display: flex; justify-content: space-between; height: ...

What could be causing the DIV elements in this React Bootstrap list to not be centered?

I'm currently working on creating an image gallery using react-boostrap. Everything is scaling properly when I resize the page, but the images are still aligned to the left. Is there a way to center them instead? <div class="container-fluid&qu ...

Trouble with ASP.NET Master Page CSS Rendering Incorrectly

My CSS seems to be causing some trouble as the DIVs are not aligning as they should. Instead, they are just wrapping around the text and not adjusting the page layout properly. Here is an example of my CSS: body { height: 95%; width: 100%; ma ...

Tips for creating a responsive container for mobile and smaller devices using Bootstrap 3

Apologies in advance for the lengthy post, but I welcome any suggestions and ideas. Thank you! I'm facing an issue with my layout breaking when the screen size is below 1200px (images and text drop down). I don't mind if they stack vertically on ...

The functionality of CSS Inline Block display is not displaying inline as expected

I have the following HTML and CSS code, but I am having issues getting the dropdown to display inline. .project Type{ display: inline-block; } <form class="smart-form"> <div class="row"> <div class="col col-sm-6 col-md-2 col-lg- ...

The width property is ineffective when used in conjunction with the d3 styling method

My goal is to create bar graphs where the width of each bar represents a person's age. However, I am having trouble applying the width attribute to the bars using the style method in d3 (I checked this by inspecting the elements in the browser). Other ...

What is the purpose of using overflow:hidden; in our code?

I am curious about the rationale behind using these three properties on this menu. I don't quite understand why they are necessary. I am eager to delve into the technical reasoning behind this. margin: 0; padding: 0; overflow: hidden; Snippet of HTM ...

Creating a toggle button for a div element to expand and collapse its content: Step-by-step guide

For my e-commerce site selling musical instruments, I'm designing a product landing page that showcases guitars, keyboards, violins, and cellos. As part of the design, I want to include expandable sections with detailed information about each instrume ...

Resize images smoothly without disrupting the anchor scrolling

I have created a website with the following design: (Caution: The site is built using AngularJS on a server that may not serve it correctly - please visit directly instead of using browser reload.) However, I am facing two conflicting requirements... ...

Implement a hover animation for the "sign up" button using React

How can I add an on hover animation to the "sign up" button? I've been looking everywhere for a solution but haven't found anything yet. <div onClick={() => toggleRegister("login")}>Sign In</div> ...

Tips for creating responsive text within a hero image

I'm exploring the world of creating responsive websites using Bootstrap, a new venture for me. One challenge I've encountered is trying to create a hero image with text positioned perfectly in the center. Despite my efforts, the text does not adj ...

Include various categories into the div containers of the listed items within the query outcomes

Is there a way to customize div styles based on query results? I want to differentiate the styles of divs in the result list based on their content. For example: I'd like bird names in the result list to have different div styles compared to other a ...

Elevate Your Designs: A New Perspective on Vertical Alignment

I am struggling to vertically align my text, which spans multiple lines, while implementing the scroll-over effect. I attempted to include vertical-align: middle; in my code, but unfortunately, it did not produce the desired result. Here is my CSS code: ...

In Internet Explorer, transitions do not always play correctly when using ng-animate and ng-if

I am facing an issue with a simple div that has a transition effect. It goes from a yellow background to a red one. <div class="bar" ng-class="{'bar-visible': vm.visible}"> The transition works smoothly when the bar-visible class is added ...

Settings for the packaging of web components

Is there a way to configure a web component in vue.config.js and separate the iconfont.css section when building? I am using the vue-cli-service build --target wc-async --name chat-ui src/views/Chat/Launcher.vue --report command to package the web compon ...

The SharePoint 2010 standard model dialogs seamlessly blend transparent printing with the background content

When using Sharepoint 2010, each list item you edit will open in a new modal dialog box by default. This dialog box appears as a new div with the class of ms-dlgContent. It also creates a div with the class of ms-dlgOverlay which acts as a grey overlay di ...

"Surprising quirks in the functionality of Bootstrap's image gallery

My goal is to create a matrix layout of 30 group member photos using HTML, CSS, and Bootstrap. Unfortunately, some of the photos are not aligning properly and are appearing in the wrong block, leaving some blocks empty. All the photos have the same aspect ...

I am looking to enhance a button's appearance by applying CSS styling with a combination of two distinct flat colors

Is there a way to apply CSS styling to a button by incorporating two distinct flat colors? Specifically, I would like the left half of the button to be blue and the right half to be red. ...