I'm working on a website where is this project https://varincom.purple.md/proiecte/ghefest/. I use Wordpress, and to create interactive map for floors, I use a plugin, but I have a problem. I managed to make floors to be organized linearly as here https://imgur.com/4c2Btpt , editing this file from the plugin https://github.com/siscanu/varincom/blob/master/image-map-pro.min.js , but what I fail is to add a different CSS class to the active floor, (line 1080 of the file .js) to be able to color it differently.
Thanks in advance to anyone who is available to help me.
You can use the :checked selector for this:
.radio:checked{
width: 40px;
height: 40px;
}
<input class="radio" type="radio" />
<input class="radio" type="radio" />
You can also put some other styling to the radio label, see this.
Related
Since my first program in 1980, I feel that I am more of a user than a programmer. That is a good thing. Angular is a great example. I don't need to know its inner workings to create acceptable code. Unless a textarea is rendered a bit too narrow, as I am fighting right now.
Angular documents it as follows: Avoid defining custom styles that would affect the size or internal layout of the component I could read it ten times but it is too complicated for a programming user of Angular Material.
Then I google and find solutions here that may have worked in other versions, but not for me today.
What I need is a strategy to get my CSS working. Do you have a suggestion?
if you want to override the Angular Material UI, one of the simplest way is to define the css in the main styles.scss (not the one in the component) i.e:
mat-form-field {
&.my-class {
width: 100%;
}
}
<mat-form-field class="my-class">
<mat-label>My Textarea</mat-label>
<textarea matInput></textarea>
</mat-form-field>
sometimes you need to have a more specific rule or us !important
Zerotwelves solution that worked for me. Component:
<mat-grid-tile colspan="3" rowspan="3">
<mat-form-field class="myTextArea" [formControl]="control">
<textarea
#textArea
matInput
[(ngModel)]="data.text"
(keyup.enter)="sendTweet(data)"
(keyup)="showAuto($event)"
[matAutocomplete]="auto"
></textarea>
Removed: style="width: 40vw;" from the components css and its html.
Added to the global styles.css:
.myTextArea {
width: 40vw;
}
Depends upon the component that you are trying to change styles of. For example, for simple properties of mat-form-field you can simple add the CSS in the same component or use a bootstrap class directly on it.
account.component.html
<mat-form-field class="w-100 or-your-class">
<mat-label>
<i class="fcp fcp-envelope mr-1"></i>Account Email
</mat-label>
<input type="email" matInput class="text-dark" formControlName="accountEmail" required>
</mat-form-field>
account.component.css
.or-your-class{
margin-bottom: 5px;
}
But there are HTML Elements that are created beyond that components "scope", to apply the styles to those HTML Elements either you can turn off ViewEncapsulation (not recommended) or You can add the styles in your top most .css file which is usually the styles.css as well as using !important to override the styles of that Material UI Component
Dudes, I have a bootstrap file on my mvc with tons of styling and it's working, but when I try to add a custom styling to a custom class, it just doesn't work. Here is an example:
<div>
<form onsubmit="return false;">
<select id="themeDropdown" name="themeDropdown" class="themeDropdown"
#*style="border-radius: 4px;
background: white url('../Content/themes/base/images/dropdown_arrow2.png') right no-repeat;
-webkit-appearance: none;
-moz-appearance: none;
padding-right:35px;
margin-bottom:2px;
border:none"*#>
<option value="Ugly_Default">Orangered & Gray</option>
<option value="Redmond">W & B</option>
.
.
.
</select>
<input id="submitTheme" type="submit" value="Change theme" class="btn btn-default" onClick="return false;">
</form>
</div>
So when I apply my style directly (currently commented), it works. When i do .themeDropdown in the bootstrap (example below), it doesn't recognize it in "Inspect element". Even when I type it as a class intellisense shows up! What the ...?! Same goes for all my other styles (code is Razor) - scaffolded classes are working fine, and my custom classes are not.
.themeDropdown{
.
.
.
}
I know there are many topics about that, but most of them have "class starts with number" problem, which is obviously not the issue. Please assist!
FOR THE PEOPLE WITH THE SAME PROBLEM: Your source isn't updated. Switch its folder to app_data for example, then return it in its original folder. That should help.
We found the solution - check next-to-last comment under my question.
marcias comment
You should check if the stylesheet you are referring to is attached to the document and if so, it is up to date. I recently had a problem, when the browser cached the linked CSS and it had used an old version of the file. If you are using Google Chrome, use the "Sources" tab.
I'm creating a css template for form types and want to give form inputs a rounded border. This works well with type=text but doesn't work with type=file (for file upload).
What am I doing wrong?
.tempform input[type="text"] {
-moz-border-radius: 10px;
}
.tempform input[type="file"] {
-moz-border-radius: 10px;
}
<div class="tempform">
<label for="textfield">Test Text Field</label>
<input type="text" id="textfield" name="textfield"></div>
</div>
div class="tempform">
<label for="filefield">Test File Field</label>
<input type="file" name="filefield" id="filefield-0">
<input type="file" name="filefield" id="filefield-1">
</div>
Unfortunately, it's impossible to style a file upload input, besides changing the width a little bit. Browsers just don't allow any other change. If you want to style your file upload input, you'll have to use a nasty hack like placing an almost invisible file upload input on top of an image (which only works in some browsers), or a JavaScript solution like ajax-upload.
According to the first Google search result, it's rather involved. See this article on quirksmode.org for information on how to do it.
Hi all fellow wordpressers
I'd like to customize the width of the radio buttons on contact form 7.
Is there a way to tell the radio buttons to be a different width to the input fields in the css.
When I put a width on the input fields I don't want this to apply to the radio buttons.
Thanks for all your help
Regards
judi
You can assign a class to the radio button in your form template on the settings page. Then open the Contact Form 7's CSS stylesheet file, possibly located at:
/wp-content/plugins/contact-form-7/stylesheet.css
and setup css rules for the input with class "radio":
input.my_radio {
width: 140px;
}
To assign a class to radio input or to checkbox input use:
[radio your-eyes-color class:my_radio "brown" "green" "blue"]
Above code will generate the markup:
<input type="radio" name="your-eyes-color" class="my_radio" value="brown" /> brown
<input type="radio" name="your-eyes-color" class="my_radio" value="green" /> green
<input type="radio" name="your-eyes-color" class="my_radio" value="blue" /> blue
Learn more at Contact Form 7 website.
Good luck!
I'm looking for some examples of stylish web forms that can be used on any site. I've googled for "stylish web forms", but most of the examples I find are of very ornate forms that use a lots of images, which are unlikely to look good on other sites that use different color schemes. I've also found lots of examples of using CSS to layout forms, but they usually don't apply any styling to the forms to make them look good.
What I'm looking for is something in between:
Properly laid out, e.g. labels and inputs aligned (I have no opinion on the whole "label on top or alongside" debate)
Nicely styled, but without using images so colors can be easily changed
Semantically valid markup, e.g. no tables or JavaScript, though I'm not fundamentalist about this (a few extra divs is OK)
A response that points to a single example is a lot more useful than "here's a page with a million example forms, most of which don't meet your requirements".
I realize I'm being very demanding here, so apologies and thanks!
Here are a few good sites, with self explanatory examples and usage.
http://designshack.co.uk/articles/10-css-form-examples
http://www.smashingmagazine.com/.../
http://jeffhowden.com/code/css/forms/
http://24ways.org/2006/showing-good-form
There are billions more online, tutorials, downloadable examples, stylesheets. To get your ideal solution you might have to mash them together.
See Prettier Accessible Forms.
However, as noted in Styling form controls with CSS, revisited, you are going to have a lot of variation in appearance across browsers and operating systems.
These articles will show you how to build visually pleasing forms, instead of giving you a catalog of a bunch of ready made templates.
I'm not sure if this is as comprehensive as what you're asking for, but I like going with something simple like this:
<fieldset>
<legend>New customer? Provide the following</legend>
<label for="FirstName">First Name:</label>
<input type="text" ID="FirstName" name="FirstName" />
<label for="LastName">Last Name:</label>
<input type="text" ID="LastName" name="LastName" />
<label for="Address">Address:</label>
<input type="text" ID="Address" name="Address" />
<label for="City">City:</label>
<input type="text" ID="City" name="City" />
<label for="State">State:</label>
<input type="text" ID="State" name="State" />
<label for="Zip">Zip:</label>
<input type="text" ID="Zip" name="Zip" />
<input type="submit" Text="Submit Order" />
</fieldset>
Using CSS like this:
fieldset {
overflow: hidden;
}
label {
clear: both;
float: left;
margin-top: 10px;
width: 125px;
/* If you want the labels flush along the right edge */
padding-right: 5px;
text-align: right;
}
input {
float: left;
margin-top: 10px;
}
/* Align the submit button under the fields */
input[type=submit] {
clear: both;
float: left;
margin-left: 135px;
margin-top: 10px;
}
That produces the layout shown in the image early in this (completely unrelated) post. There's a source download with the markup and CSS there too, if you don't mind ASP.NET.
Speaking to reuse, I've found that basic structure to be flexible enough to use anywhere. For example, we used basically the same markup and CSS for this more customized contact form: http://www.thirtyfiveatlanta.com/meet/
I really like Wufoo's forms : http://wufoo.com/examples/
I've copied and used their HTML and CSS for my own projects with good results.
Uni-Form
This response was posted as a comment by Darmen, but I feel it's sufficiently useful that it deserves to be promoted to a reply
http://www.rockettheme.com/ has some pretty good templates and themes. They are generally for existing CMS systems but you could adapt them or parts of them for your own sites.