Search found 3 matches for color

Colorize the backgrounds of stickies and announcements

The following tutorial will allow you to display a specific color for stickies and announcements on your Forumotion forum. This way important messages will be highlighted in your sub-forums.

Topics tagged under color on The forum of the forums Captur19

This tutorial is applicable to the following forum versions : phpbb2, phpbb3, punbb, and invision

Before making any changes, make sure that your forum meets the following conditions :
- JavaScript codes management is activated

1. The JavaScript

The first step of this tutorial is to install the JavaScript on your board. This will allow us to add a class to the cells containing the sticky and announcement images. Go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Placement : In the sub-forums

If you're using phpbb2, punbb, or invision paste this code :

Code:: $(function() { /* add a class to the cells of announcements */ $('img[src="https://url_image_annonce.jpg"]').closest('tr').addClass('annonce'); /* add a class to the cells of stickies */ $('img[src="https://url_image_Note.jpg"]').closest('tr').addClass('Note'); });

otherwise paste this code for phpbb3 :

Code:: $(function() { /* add a class to the cells of announcements */ $("dl.icon[style*='https://url_image_annonce.jpg']").addClass("annonce"); /* add a class to the cells of stickies */ $("dl.icon[style*='https://url_image_Note.jpg']").addClass("Note"); });

Modifications :
In both scripts, make sure to change the image URLs with the ones you use on your theme :
- https://url_image_annonce.jpg : The image URL used for announcements
- https://url_image_Note.jpg : The image URL used for stickies

When you're finished make sure to save the script. Wink

2. The CSS

Now that the script is installed, a class will be added to the cells of stickies and announcements. We will use these classes to apply a style to them. Go to Admin Panel > Display > Colors > CSS stylesheet and paste the code that corresponds to your forum version.

phpBB2, punBB and Invision :

Code:: tr.annonce td {background-color:#COLOR!important;} /* modify the background color of announcements */ tr.Note td {background-color:#COLOR!important;} /* modify the background color of stickies */

phpBB3 :

Code:: dl.annonce {background-color:#COLOR!important;} /* modify the background color of announcements */ dl.Note {background-color:#COLOR!important;} /* modify the background color of stickies */

Modifications :
For both versions, replace #COLOR with the color code of your choice.
- tool : http://www.colorpicker.com/

Note :
If you are familiar with CSS, you can apply a more perfect style on stickies and announcements, such as a specific font color, a different typeface, etc..

Extra : topic icons, global announcements, etc..

The tutorial above is mainly focused on changing the background color of stickies and announcements, you can apply this to different cells in your forum by modifying the base script. For example you can apply it to global announcements using the URL of the image associated with global announcements, or to topics icons, using the URL of the images used for your various icons.

For example, if we want to add a color for cells containing the icon Topics tagged under color on The forum of the forums 505812

Topics tagged under color on The forum of the forums 505812

, simply use the script and CSS below :

phpBB2, punBB and Invision :

Code:: $(function() { /* add a class to topics with the icon Résolu */ $('img[src="https://forum.forumactif.com/users/2913/10/00/00/smiles/505812.png"]').closest('tr').addClass('resolu'); });

phpbb3 :

Code:: $(function() { /* add a class to topics with the icon Résolu */ $("dd.dterm[style*='https://forum.forumactif.com/users/2913/10/00/00/smiles/505812.png']").closest("dl.icon").addClass("resolu"); });

phpBB2, punBB and Invision :

Code:: tr.resolu td {background-color:#COLOR!important;} /* modify the background color */

phpbb3 :

Code:: dl.resolu {background-color:#COLOR;} /* modify the background color */

Explanation :
In the script, we simply change the URL of the image, and the class added here : addClass("resolu"); ( thus changes from "annonce" or "Note" to "resolu" ). If you do not change this class, the script will not work correctly.

Don't hesitate, be creative ! Wink

CSS problem trying to change quote color

Hi, I'm Erin.

I made a new forum and everything looks great with the changes I've made to the original skin which I downloaded from HitSkin and modified heavily:

except for trying to change the background color and the font color of the "quoted text" in a reply. The background is sort of white and the default text color is also white and therefore the text doesn't appear.

I need the default text color to be white since the main forum is blue.

I've tried to override the CSS with the !important code added into the CSS section, but it does nothing. It doesn't change the background and it doesn't change the font color.

The board is here: http://trump.bigboardlive.com

I have tried the following replacing the variables with the colors I wanted but it still shows up WHITE:

blockquote{
background: #COLOR !important;
}

blockquote div{
color: #FONTCOLOR !important;
}

and also tried:

.quote {
font-style:italic
border-width:2px;
background-color: green;
}

Any help with this issue would be greatly appreciated! Thank you!

UPDATE!

I just tried changing the message-box instead and it has solved my problem. Thanks, anyway! Posting the correction here in case anyone else has the same problem. I incorrectly looked for quote instead of message-box:

#message-box textarea {
color: #844F4F;
font-family: Verdana,Arial,Helvetica,sans-serif;
width: 80%;
}

Colorize the cells when a new message is posted

Colourize the cells when a new message is posted

The following tutorial will allow you to colourize the cells of your Forumotion forum when a new is message posted. Below you will find an example with phpbb3 :

Topics tagged under color on The forum of the forums Captu165

Installing

Go to Administration Panel > Modules > JavaScript Codes Management and create a new script.

Title : Your choice
Placement : In the homepage
Paste the script below which corresponds to your forum version :

phpbb3 :

Code:: $(function() { $('dl.icon[style*="https://2img.net/i/fa/empty.gif"]').addClass('newpost'); $('dl.icon[style*="https://2img.net/i/fa/empty.gif"]').addClass('newpost'); });

phpbb2, punbb, and invision :

Code:: $(function() { $('img[src="https://2img.net/i/fa/empty.gif"]').closest('tr').addClass('newpost'); $('img[src="https://2img.net/i/fa/empty.gif"]').closest('tr').addClass('newpost'); });

Modifications :
Replace https://2img.net/i/fa/empty.gif by the URL of your image which indicates a new message. Attention ! The script has two similar lines, because you need to include the new message image for categories and forums. When finished making modifications, save and submit your script.

Modifying the CSS

Once the script is installed, you only need to customize the CSS in order to apply color to the cells when new messages are posted. Go to Administration Panel > Display > Colors > CSS stylesheet and paste the code which corresponds to your forum version.

phpbb3 :

Code:: dl.newpost { background-color:#COLOR !important }

phpbb2, punbb, and invision :

Code:: tr.newpost td { background-color:#COLOR !important }

Modifications :
For both versions, replace #COLOR by the color code of your choice.
- Help : Find a color code

Save your modifications and it's done ! :wouhou: