Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Just got this template
http://www.gt3themes.com/wordpress/photo-fullscreen-responsive-wordpress-theme-flicker/
And can't locate how to change these elements via css
4 column portfolio page.
Your help is much appreciated. Thanks
For hiding Both buttons
.likes_and_share { display: none; }
For hiding Share button
.page_share { display: none; }
For hiding Like button
.page_likes_add { display: none; }
Basically u need javascript to hide your element . You can use .hide() method which is present in jquery .
but still you want to hid an element by using css then u should go through like that
javascript code
function toggle_visibility(id)
{
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I've had a lot success of applying pseudo elements to single class, but when I only want it to work when a parent class (we'll say .foo) also applies, the content is not applied before the other class specified (in this case, 'bar):
.foo .bar:before {
content: "URL: ";
}
Is there some way to achieve this?
Update
Actual example:
.metajelo-ui_resourceMDSource:before {
content: " Resource Metadata Source ";
font-weight: bold;
}
/* FIXME: this is not working for some reason: */
.metajelo-ui_resourceMDSource.metajelo-ui_url:before {
content: "URL: ";
}
The idea is that :before should be triggered on any url-bearing element that is also a resourceMDSource-bearing element (taking the .metajelo-ui_ prefix into account).
As we can see, there is a ::before for the .metajelo-ui_resourceMDSource, which corresponds to the first style posted above, however, the highlighted span with the url class has no ::before shown, and there is no "URL: " being rendered on the page.
In case this isn't descriptive enough, here is a live demo: https://labordynamicsinstitute.github.io/metajelo-ui/ (click add item for Supplementary Products) - will be happy to fill in more details later.
If you apply the class to the same element...
HTML
<div class="foo bar"></div>
Then your CSS should look like this...
.foo.bar:before { [rules here] }
If the class is on any ancestor like this...
<div class="foo">
<div class="bar"></div>
</div>
Then your CSS should look like this (space between classes)...
.foo .bar:before { [rules here] }
Just remove the space between .foo and .bar to select multiple classes (element is .foo also is .bar).
Here's the code:
.foo.bar:before {
content: "URL: ";
}
<p class="bar alo">bar without foo</p>
<p class="bar foo">bar with foo</p>
This question already has answers here:
How to set the height of CKEditor 5 (Classic Editor)
(28 answers)
Closed 4 years ago.
I was trying out ckeditor5 in Vue.js, and I came across a problem of not being able to set it's height manually, below is my code please let me know if I am doing anything wrong.
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
data() {
return {
editor: Editor,
editorData: '',
editorConfig: {
height: '500px'
}
}
Classic editor (CKEditor 5) no longer encapsulates the editing area in an , which means that the height (and similar options) of the editing area can be easily controlled with CSS. For example the height setting can be achieved with :
<style>
.ck-editor__editable {
min-height: 500px;
}
</style>
or
.ck-content { height:500px; }.
2020 Note: when working with single page Vue components, do not scope the CSS you want to add to ckeditor, as it's elements are rendered separately from Vue and no data attributes are added to them. In other words, don't do this, as it will not work:
<style scoped> /* don't add "scoped"; note that this will also globalize the CSS for all editors in your project */
.ck-editor__editable {
min-height: 5000px;
}
</style>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Is it possible to set background color dynamically?
I set a color in Database. Then read color from database in css.
Actually I am making a webapp which have blue color button , blue color menu and extra. I have set css color from style sheet and load it in header. Now I cant pass data from my cshtml file to css file. So How is it possible to set color. Please give me a way so that I can go that way and fulfill my goal.
You can write an action filter to get your colors from the db ,pass those values to the layout where you use that to override some of your css style definitions.
public class MyColors : ActionFilterAttribute
{
public override void OnActionExecuted(ActionExecutedContext filterContext)
{
var primarColor = "red";
var vb=filterContext.Controller.ViewBag;
vb.PrimaryColor = primarColor;
base.OnActionExecuted(filterContext);
}
}
and register this filter globally so this is applicable to the entire app.
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
GlobalConfiguration.Configure(WebApiConfig.Register);
GlobalFilters.Filters.Add(new MyColors());
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}`
And in your layout.
<head>
#Styles.Render("~/Content/css")
<style>
# {
var primary = String.IsNullOrEmpty(ViewBag.PrimaryColor) ? "black": ViewBag.PrimaryColor;
}
h1 {
color: #primary;
}
</style>
</head>
define two styles in your .css file:
.blue-button{
background: #00f;
}
.red-button{
background: #f00;
}
Get the property from your database and save it in viewbag (or model itself, it doesn't matter).
In your view, you define your button like this:
<input type="submit" class="#(ViewBag.IsThisBlue ? "blue-button" : "red-button")" value="Click Me">
Edit: I just realized that you actually save the color in db. Since you can't pass that to the css directly, you can use style attribute on input itself in the same way I used class attribute above.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a set of images that i want to place in a stair type way, like so:
img
img
img
img
I want the images to overlap and I'm currently using faux positioning.
You can see an example here:
http://jsfiddle.net/2PSFC/
I would like to add a margin-top and margin-left of 40px to every img after the first one. As you can see the :nth-child doesn't seem to be working, but anyways i would much prefer adding the margin with jquery. any ideas?
If you don't know the number of images, you can set the margins dynamically using jQuery:
$('.stuff').css('margin-top', function(i) { return i * 40; })
.css('margin-left', function(i) { return i * 40; });
Or
$('.stuff').each(function(i) {
$(this).css({ 'margin-top': i * 40, 'margin-left': i * 40 });
});
Here's a fiddle
If there aren't too many elements, I wouldn't suggest using jQuery. To fix your CSS do this:
.container:nth-child(2) .stuff { margin-left: 40px; margin-top: 40px; }
Since every element with the class .stuff is wrapped in a container div, it will be the first and only child, but the container divs have different child indexes.
jQuery solution: http://jsfiddle.net/WKE4n/
Including an answer for centering the stack of images in the parent element, which was asked as a comment on another answer:
$('.stuff')
.css('margin-top', function(i) { return i * 40; })
.css('margin-left', function(i) { return i * 40; });
$('.wrapper').css('left',($('.wrapper').parent().width() / 2) - ($('.stuff').length * 20) - ($('.stuff').width() / 2));
JSFiddle
I'm sure there's some way to clean up that second "line" of JS (the one that centers the stack of images), but I can't think of it for the life of me.
A friend and myself are trying to workaround IE (7/8). We have built a canonical example here:
http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm
Using a CSS menu, we would like to have selects in them. However, in IE, the menu goes away when you interact with the select box. We believe this has to do with a bug in how selects affect events.
Is there a workaround? At least with pure CSS or DOM hacks?
I do not think there is a pure CSS way around this. This is due to a very common bug to the way IE handles events on select elements.
You can however work around it with Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.nav_element a').mouseover(function() {
$('.submenu').hide();
$(this).parent().find('.submenu').show();
});
$('.submenu').mouseover(function() {
$(this).show();
});
$('.submenu').mouseout(function (e) {
// Do not close if going over to a select element
if (e.target.tagName.toLowerCase() == 'select') return;
$(this).hide();
});
});
</script>
The code above uses jQuery.
Here is a way to improver select behavior in IE7/8, but it does not fix the issue
Change DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Add script
<script>
function ddlOut(e) {
setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000)
}
</script>
Add css
#nav .over div.submenu
{
display: block;
}
#nav .nav_element{
behavior: expression(
this.onmouseover = new Function("this.className += ' over'"),
this.onmouseout = new Function("ddlOut(this)"),
this.style.behavior = null
);
}
It will work better at least but of course not perfect.
My advice is to change select control to html equivalent. I use OboutDropDown that has a nice view. There are many implementations that can suite you needs.
First you need to expand the :hover surface underneath your menu.
So in your css add width:310px;height:220px to #nav .nav_element a.
(also add a class or an id on the second div styled with top:220px)
Now you just need to simulate a mousedown triggered when you click on the select which will halt when the selection between the options is done - you can probably do the last part if you check for the onfocus state of the select which will stop the mousedown.