I'm currently trying to use the accordion component of Semantic UI React and can't figure out how to change the color and arrow to white.
https://semantic-ui.com/modules/accordion.html
In the css, you can see that the widget has styling that configures it to black.
Does the component have a way to change the text color?
Is it possible to put a parent div to override the color text? (tried
that but didn't work)
How would you override the color? Any workaround. (This can be done with an override as mentioned below in the comments with the !important tag)
The accordion react component takes in panels
const panels = [
{
title: "test1",
content: "test1"
},
{
title: "test2",
content: "test2"
},
{
title: "super",
content: "test"
}
]
<Accordion className="test" panels={panels}/>
.test{
color:white;
}
The accordion takes in a className, but passing in a style doesn't seem to work at all either. I've tried at each level as well Accordion.Title Tag.
You have to personalized the class of the composant you want to change and you have to "overriding" the css classes of semantic-ui using !important.
.ui.accordion.perso
.title:not(.ui) {
color : #ffffff !important;
}
If you want more info on !important (https://css-tricks.com/when-using-important-is-the-right-choice/)
Peace
Figured it out.
<Accordion>
<Accordion.Title className="test2">
<Icon name='dropdown' />
<label className="label-color"> super</label>
</Accordion.Title>
<Accordion.Content>
</Accordion.Content>
</Accordion>
Realized that I could just use the separate components of an accordion and add my own elements and style it.
Related
I have a situation where the api is providing me with a colour and the colour of some parts of the site should be based on the colour provided by the api, right now the value is hard coded in app.scss file, is there a way where i can dynamically change the value of it?
consider this case, i am on user route, and user model is providing me with a colour yellow, now how do i apply this colour to the body tag, the footer etc?
and there are other addons whose colors needs to be changed,
right now i have hard coded the color of the addon in app.scss
is there a way i can change the color of app.scss based on the color supplied by the api?
If you don't need to support IE, you could use CSS Variables, (caniuse) and change their values with JavaScript.
In your CSS, set --variable-name: value in document root (so it's global).
Then use it in other places with var(--variable-name):
:root {
--main-bg-color: red;
}
#div1 {
background-color: var(--main-bg-color);
padding: 5px;
}
and in JavaScript:
changeColor(newColor) {
document.documentElement.style.setProperty('--main-bg-color', newColor);
}
Here is an example with ember-twiddle
Ember-cli compiles app.scss into css during the build process and you can not affect it when application is running.
If colors are pre-defined (i.e. user can choose color scheme from list), you can create pre-defined css-classes for body tag and then just change css-class of body element.
You can use a following component to change css-class of body tag
import $ from 'jquery';
import Component from '#ember/component';
export default Component.extend({
didReceiveAttrs() {
const oldClass = this._oldBodyClass;
if (typeof oldClass === 'string') {
$('body').removeClass(oldClass);
}
const bodyClass = this.bodyClass;
if (bodyClass) {
$('body').addClass(bodyClass);
this.set('_oldBodyClass', bodyClass);
}
},
willDestroyElement() {
const bodyClass = this.bodyClass;
if (bodyClass) {
$('body').removeClass(bodyClass);
}
},
});
Somewhere in template (probably application):
{{body-class bodyClass=(user.bodyClass)}}
I hope this addon will help you. You can create computed property which depends of your api respond with color and then apply it to the html tag as in example.
I want that each label in Blogger have a different color. I tried to create a class to each label, for example, add a class ".Movies" to label Movies and class named ".News" to label News. But I don't know what to do next.
Here's my current code that affects all labels:
<div class='tl-label-post'><div class='postags'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'/>
</b:loop>
</b:if>
</div> </div></div>
Thank you, guys!
Already dit it!
Keep the default CSS and HTML code of labels intact, and instead of changing it, do this for each label:
a[href^="http://www.YOURSITE.com/search/label/CINEMA"] {
color: #colorcode !important;
background: #colorcode !important;
}
You can see I've added the entire label path for Cinema. Similarly,
take full path of all labels and add different color rules for each
label
For example, let's say one more label name is 'Television'.
You can add one more rule like this:
a[href^="http://www.YOURSITE.com/search/label/TELEVISION"] {
color: #colorcode !important;
background: #colorcode !important;
}
Color and background can be of your choice. Make sure you keep the
!important directive intact.
I'm trying to change the default color for my title, which is white at the moment.
<nav class = "top-bar" data-topbar>
<ul class = "title-area">
<li class = "name">
<h1><%= link_to "CF logo", root_path, class: "home"%></h1>
</li>
</ul>
</nav>
I tried calling
.name h1{
color:red;
}
and
.title-area .name h1{
color:red;
}
even
.home{
font-size: 1.5em;
font-color: red;
}
but none of them works. What can I do?
If your title is inside of an anchor tag <a> - you'll want something like this:
.top-bar .name a { color: #9dcf81; }
Inside Chrome, after you inspect your element, look for the plus symbol once you highlight your title with a mouse click. Consider using the !important attribute if the color doesn't stick.
p.s. - Please provide a link with a URL Shortening service (if your concerned about privacy) to your site.
Whether or not a CSS rule is used is dependent on the selectors specificity. See the MDN for details on how specificity for a CSS selector is calculated.
If you want to see which CSS statement is overriding your one (presumably one of the styles specified in the Foundation CSS library that you are using), then I would recommend a tool like firebug or chrome developer tools which allow you to inspect an element and see which rules are being taken into account and which are being overridden by more specific selectors.
You can also use important! inside a selector to override the specificity, however use this with caution. So for example:-
.name h1 {
color:red !important;
}
I have a form where I have joomla2.5 Editor. I want to show the content of that joomla2.5 Editor in Iframe Joomla2.5 Modal Box.
I use joomla editor
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
This page is in view folder.
I use the code in js file like window.parent.document.getElementById('body').value or window.parent.jInsertEditorText(tag, this.body);And it is included in js file. when I try to alert, alert shows null.
How to fix this in js file. If any body knows about it, please, reply it.
I need your hand.
Thank you
I write the answer here, because the comments are not good to display
code
Joomla modal functionality is good to show a link from a component but does not allow us to open a given element on the page. Therefor you need to write your own code, first of all do not override Joomla's core or all the modifications you make will be overriden the next time you upgrade. So assuming that you take this into account:
1- First thing to do, add the javascript code for your custom modal window. You will need to pass the text container div id or classname to the following code:
<script type="text/javascript">
$(document).ready(function(){
// Main parameters:
// Modify texteditor-id with the id or classname on your text div. For a classname use '.' instead of '#'
var HTMLContent = $("#texteditor-id").html();
var width = 600;
var height = 250;
$('#button').click(function(){
// transparent background
// we create a new div, with two attributes
var bgdiv = $('<div>').attr({
className: 'bgtransparent',
id: 'bgtransparent'
});
// add the new div to the page
$('body').append(bgdiv);
// get the widht and height of the main window
var wscr = $(window).width();
var hscr = $(window).height();
// set the background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// modal window
// create other div for the modal window and two attributes
var moddiv = $('<div>').attr({
className: 'bgmodal',
id: 'bgmodal'
});
// add div to the page
$('body').append(moddiv);
// add HTML content to the modal window
$('#bgmodal').append(HTMLContent);
// resize for center adjustment
$(window).resize();
});
$(window).resize(function(){
// explorer window dimensions
var wscr = $(window).width();
var hscr = $(window).height();
// setting background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// setting modal window size
$('#bgmodal').css("width", ancho+'px');
$('#bgmodal').css("height", alto+'px');
// getting modal window size
var wcnt = $('#bgmodal').width();
var hcnt = $('#bgmodal').height();
// get central position
var mleft = ( wscr - wcnt ) / 2;
var mtop = ( hscr - hcnt ) / 2;
// setting modal window centered
$('#bgmodal').css("left", mleft+'px');
$('#bgmodal').css("top", mtop+'px');
});
});
function closeModal(){
// remove created divs
$('#bgmodal').remove();
$('#bgtransparent').remove();
}
</script>
2- Your preview link must look something like this, the most important part is the id="button" part because it will be used to be identified by the previous jquery code:
<input type="button" id="button" value="Preview" />
3- Add the following code to your css
.bgtransparent{
position:fixed;
left:0;
top:0;
background-color:#000;
opacity:0.6;
filter:alpha(opacity=60);
}
.bgmodal{
position:fixed;
font-family:arial;
font-size:1em;
border:0.05em solid black;
overflow:auto;
background-color:#fff;
}
And that is basically what you need to do. Hope that helps!
Joomla has an inbuilt way to show modal boxes:
First you need to do is ask Joomla to load the modal library:
<?php JHTML::_('behavior.modal'); ?>
And this is the code that opens the modal window:
<a rel="{handler: 'iframe', size: {x: 750, y: 600}}" href="url_to_modal_editor" target="_blank"> Open Modal Editor</a>
This will go in the linked href page (the page of the modal editor), lets say editor.p:
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
Please include class="modal" in anchor tag.
I am using Jquery UI datepicker and I am trying to change the background color for each day in a month.
For this I am using beforeShowDay function in Jquery UI date-picker.
As an example I am trying to change the background color for odd days in a month and my script changes only border color.
I am not sure where the mistake is, How do I over ride the entire back ground color in Jquery to achieve the desired result.
please help.
Script Used:
$(document).ready(function() {
//$("#datepicker").datepicker();
$("#datepicker").datepicker({ inline: true, beforeShowDay: highlightOdds});
});
function highlightOdds(date) {
return [true, date.getDate() % 2 == 1 ? 'odd' : ''];
}
Css Used:
.odd { background-color: green; }
hii All I found it myself,
I just modifed the css as given below and it works cool :)
.odd a.ui-state-default {color:white;
background-color: red;
background: red;}
thank u all :)