Is there a way I can style the file name text that is displayed next to the Browse button (shown in the image)? I want to move it via position:absolute and stuff. Thanks.
I made this jquery plugin, use it if you think it could help you
this is my a demo of the plugin in action
you could just use it like this
javascript
$('input').fileprettify();
css
.selected-file{
color: green;
}
what this plugin does is replace the file input field with a button and a span containing the selected file, and you can then style the button and the selected file text using css, the good thing about this is that you will use the same style for all browser.
Related
i tried to hidden the subcategory and sub-subcategory menu in topmenu horizontal in Clasic Theme Prestashop 1.7.3 but i didnt find the correct code css and php code in tpl.
If anybody can help me? Only need change the code in css or .tpl too?
Thanks.
By CSS is really easy, with google chrome you can do...
Right click in the element of the menu you want to hide.
Click on Inspect
Now in the DevTool will be highlighted the element.
Do right click on it.
In the contextual menu, make click on Copy > Copy selector
After this, you will have the CSS selector that you need to hide in your clipboard, just paste it in some style sheet (CSS file) to create your rule to hide the element, something like this:
#category-3 > a {
display: none;
}
In some of this style sheets should works:
/themes/YOUR_THEME/assets/css/custom.css
/themes/YOUR_THEME/assets/css/theme.css
Once made, don't forget to clear the cache.
I am trying to customize the CSS of a course website in which I cannot use javascript or change the HTML - I can only upload custom CSS files.
I have made it so, in a list of content links to .jpg files, when I hover over the list item, the corresponding image appears underneath. I have got the hover function to work but it requires me to make a new class selector for every file in the list.
The code that shows the image on hover is:
.itemlink:hover:after {
content: url([image url]);
display: block;
position: relative;
zoom: 50%;
}
The image files are linked in this way.
Is there a way for me to set a variable called "--assetPath" that refers to whatever link is present in the href for the "link-div-head" class in the attached image, so I can place that variable as the content url for the hover effect?
Alternatively, could I set it up so the url is a variable that is set to return the url of an image file if given the file name (ie. the text in the "link-text itemtext" class below the highlighted part in the attached image)?
Basically, is there a way for me to set this up so that the image url is automatically the image that I am hovering on, so I don't have to link each individual file.
I'm fairly new to css so I hope this makes sense. I can provide extra clarification if necessary. Thanks.
How to change the background and text color of every read more button on my website?
The site has "swift" theme.
There should be a option in Wordpress admin panel to edit website's appearance, including font size, color and stuff like that. I have not worked on the Swift theme but from the little experience I have, theme's options have such features to modify color/size/font without having to write CSS for it.
OR you can add custom CSS to your website, but for that you will need to write CSS which may overlap with other settings on the website if not done carefully.
The 'Read More' element has 'moretext' class, so you need to work on CSS to customize it. Something like this:
.moretext { background: #ffffff; color: 000000; }
Here's the documentation https://codex.wordpress.org/Customizing_the_Read_More
I'm a new user of GWT and I'm looking for some advice concerning "theme management".
I have to make a website that can handle theme changes. What I mean is that a user can make is own theme by filling a form, then the website will automatically and dynamically changes its color to display the new ones.
I thought using a CSS sheet for all the static properties and using some GWT lines (e.g. label.getElement.getStyle.setColor(...)) to change color. But I have many "hover" properties and I think creating many MouseOverHandler is not a good idea ...
Is there a way to edit CSS sheet dynamically or a magic trick to do that ?
Thanks.
You have many options - the most straight forward (to me) is to make use of the existing CSS classes that GWT introduces. If you look at javadocs for any of the widgets GWT provides, you'll notice the CSS Style Rules section. For example, Button:
.gwt-Button
the outer element
That means that every Button you add to the page has a .gwt-Button style applied to it. If you inject a CSS stylesheet with a rule that overrides this style:
.gwtButton {
background: red;
}
All your buttons will turn red. You can inject stylesheets using StyleInjector. Creating the stylesheet's content dynamically is up to you - but it's just text, it shouldn't be hard (but make sure the generated CSS rules are valid!).
To get you started, try hooking up this code to some button and see if clicking it triggers changing all the Buttons on the page red:
StyleInjector.inject(".gwt-Button { background: red; }");
If you have custom widgets that you want styled differently, just add an individual class to them (.customWidgetWhatever, like Button has .gwt-Button, etc.) that you will include in your custom stylesheet.
Make sure you understand how CSS works and what it can do for you. For example, if you want to style each button the same, you don't have to change each button's style individually, just use:
button {
background: green;
}
And all the <button>s will turn green.
The easiest way to change themes without reloading the whole application is to assign a theme class to the body element.
You'd want to prepend each CSS class in your app with a particular theme, e.g.:
.theme1 .myClass {
color: red;
}
.theme2 .myClass {
color: blue;
}
Then you'll apply a particular theme to the body element:
<body class="theme1">
When you want to change themes, you'll have to change the body class so it will become:
<body class="theme2">
this way, each element that has class myClass will have its color changed from red to blue.
You cannot edit a CSS file dynamically, but you can inject CSS style either as a new CSS file, or directly into your document.
For example, you can define all key CSS rules in your "main.css" file, and add your user-defined rules directly into the host HTML page with a style tag.
Is there a way - or anyone knows if someone already made this available - a way to style links in the form of buttons in the aristo style?
http://aristocss.com/
Using this CSS -reform a regular link to the style of a button?
You can more than likely copy all the CSS for those buttons and just use it on a link. In fact you'd probably be able to rip out a bunch of reset stuff as buttons often have all sorts of browser defaults which a link doesn't have.
So change:
button {
// Cut
}
to:
a {
// Paste
}
Hope that helps :)
(The css you need by the way starts right at the top of this file: http://aristocss.com/css/aristo.css)
Sure - just grab the CSS they're already using, change it from button to a.btn, add display:block, give your link a class of "btn" and you're all set.