I am trying to style the Select element using http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
the options are starting well above the button.
Am not able to style it. could someone help me how to modify it.
Link: http://bakasura.in/king/forms.html
If you add a height of 30px to the select.styled class, the menu will appear in the correct location.
Related
Goal: I need to set anchor tags for the wordpress-site: http://joy-academy.eu/programs/
I am using Visual Composer and there is some animation.
Problem: If I try to set an anchor tag, it scrolls to the right place but does not show the previous parts that are animated like here:http://joy-academy.eu/programs/#example or if I use a Plugin "scroll to Id", it just scrolls to a random place, like for example here: http://joy-academy.eu/programs/#cc
Details: The Wordpress Theme is "Zyen". Ref: https://themeforest.net/item/zeyn-multipurpose-wordpress-theme/8848292
Thanks for your help!
I see that your site is using the Zeyn theme.
That's the first place to look for coding style changes. Here's a demo example doing what I think you are hoping to achieve. http://djavaweb.com/selector.php?theme=zeyn-classic
This means don't use the button for an anchor. So, use the Extra id in the rows to correspond with the anchor link (#example).
Here's the directions to do this; just start after the steps about the menu items.
http://kb.detheme.com/knowledge-base/zeyn-faq-one-page-navigation/
I'm trying to place a down-arrow in my navigation menu, if there is a li within an li.
Hover over the Shop link to see where I'm having difficulty - http://codepen.io/anon/pen/ABucF
The arrow (or V for my demonstration purposes) should be just after the Shop tab, Check Out and My Account, not inside it.
How would I be able to achieve this in the CSS?
Thank you.
You're trying to look at an element to check for a specific condition and style its parent based on that.
CSS can't yet be used to style parent elements unfortunately.
Your best bet is to simply add a class onto each element you want styled and do it that way or to physically place an icon/img in each anchor tag that requires it.
Alternatively use JavaScript to make it happen.
give a class to the parent who has sub child in it i.e Shop
.parent:after{
content:"V";
//or
background:url(image.png) no-repeat position;
}
updated pen
I just wrote a tinymce plugin, which has a drop down box. I can increase the size of the select box, by manipulating the CSS file of the advanced theme (the theme I am using). Is there any other way to do it, without changing the CSS? Say in the function of the javascript code that actually creates the select box?
Edit:
I did set the max_width property while creating the listbox, in the createListBox function. But it only changes the width of the elements in the dropdown, not the drop down itself :(
You can always change the css using javascript:
document.getElementById("ATTRIBUTE_ID").style.width = "1000px";
See this SOF link for more details: Change an element's class with JavaScript
You should have a closer look at the tinymce configuration option editor_css.
Using this setting you may configure a css file which will overwrite the default css for the toolbar stuff. This way you don't need to change anything of the core css.
tinymce dropdown generates internally and it's hard to do this in right way, but you always can access the needed element by CSS like:
div[id*='mceu_'].mce-container.mce-panel.mce-floatpanel.mce-menu.mce-animate.mce-fixed.mce-menu-align.mce-in div.mce-container-body.mce-stack-layout {
max-height: 200px !important;
}
for me it works for all dropdown select lists inside modal windows like link-plugin - reduce height of select list block.
Is it possible to add new CSS properties in the Chrome inspector? It seems that you can only edit existing properties.
Also, once you edit the properties, is there a way to view the revised CSS as a whole?
Yes, it's possible to add new CSS properties in the Chrome inspector and review them in a few easy steps:
Right click in the element you want to change and choose "Inspect element";
Click the "New Style Rule" button (1 in the image below);
Google Chrome will assign a CSS matching rule which you can rename (2 in the image below);
Add your CSS rules (2 in the image below);
When you're done just check the "Computed Style" pane (3 in the image below).
You can add new property in a rule double clicking within the rule. Also you can add a new rule from the wheel in the corner and then select "New Style Rule".
To view the whole revised document go to: Resources > Frame > site name > Stylesheets > stylesheet-name.css
Or simply Click the + symbol above the css properties
Is it possible to add new CSS properties in the Chrome inspector? It
seems that you can only edit existing properties...
Simply double-click in any white and empty space in the "Styles" panel.
I tend to double-click to the right of the } for whichever CSS rule I want to edit.
Also, once you edit the properties, is there a way to view the revised
CSS as a whole?
See #Sotiris's answer.
Not that I know of.
There may be an extension that can do this, but if one exists, it probably won't preserve the exact formatting of your original CSS.
Why not? Here is the screenshot of the Styles panel of the Google Chrome inspector
Notice the block:
element.style {
}
You just click with mouse in that area and inspector will give you an opportunity to add new styles. If you need to add a new attribute to an element, you right click on it in the Elements panel and choose 'Add attribute'.
Also, once you edit the properties, is there a way to view the revised CSS as a whole?
Doesn't Computed Style panel give you this information? There you can check al lthe styles applied to a node and, actually, in what rule and from what stylesheet they are applied.
I have two menus based on someones credentials.
The menu is an UL within a wrapping DIV and I would like to place an If Then within that DIV to set is class dynamically.
Does anyone know if this is possible or if there is a better approach?
Thanks in advance!
Give the element an id and add the runat="server" attribute to it.
You can now access if from your code and set its attributes programmatically.
If its just a div, you can use asp:Panel instead -- asp:Panel will render a Div, and you can set its visibility in your code behind
Scratch that, actually that wont work.
I need to hide a specific list item and so what I will simply do is write that list item dynamically when the correct user is logged in.