Here is a list of the research that I have done. First I looked how to do it on the internet and I found this site.
Then I asked a friend and he suggested that I do this with the code, and as an example, gave this:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
so in HTML
<h1 class"best-header-ever"> Header </h1>
then in CSS
.best-header-ever {
color: blue;}
I don't know if he was doing it in the right order so the above, is the most information I have of an alternative strategy
Now I am working on this, again in the WordPress editor:
.best-header-ever{color: blue;}
<header> header
link rel="stylesheet" type=text/css href=styles.css
[header/]
(this text to the left was part of the website-->)This is a contact page with some basic contact information and a contact form.
[contact-form]<span id="mce_SELREST_start" style="overflow:hidden;line-
height:0;"></span>[contact-field label="Name" type="name" required="1"/]
[contact-field label="<span id="mce_SELREST_start"
style="overflow:hidden;line-height:0;"></span> Email" type="email"
required="1"/][contact-field label="Website" type="url"/][contact-field
label="Comment" type="textarea" required="1"/][/contact-form]
body/
I don't know what I'm doing wrong and I would like to add background colour to the font and text. Oh, I have also been working on freecodecamp.org as research.
I am trying to learn how to do this work without the security net of freecodecamp to improve my skills.
Also, I don't know if I can even add HTML5 to HTML (everything from contact form to /contact form was being registered by the computer, but when I added any other characters, no background colours or colours would display).
This is what the page looks like:
myedit_pic
I don't know if this makes a difference, but the WordPress editor has buttons:
wordpress-editor-interface
I suggest you use background-color: instead of color:. Color will just change the text color, or the color of the words inside that header. Using background-color will change the background color.
First to answer your initial question:
When you assign a class in HTML, make sure to put an equals sign between 'class' and the name of the class in quotes:
This:
<h1 class"best-header-ever"> Header </h1>
Becomes:
<h1 class="best-header-ever"> Header </h1>
Also, to address your issue about how to learn and test your code, I suggest using something like jsfiddle.net. You can test HTML, CSS, and Javascript (when you are ready for that) and see the results live.
Related
I added a subscription box widget and I need to change the style to put the submit button inside the input box. It currently looks like this:
enter image description here
[enter image description here][2]
And I want it to look like this:
[2]: https://i.stack.imgur.com/Z4Aqe.png
Which I know how to do with plain html, but I'm not sure how to change the Wordpress widget html while keeping the functionality. Here is the widget code:
<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:genesis-blocks/gb-newsletter {"instanceId":0} /--></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group -->
Thank you in advance.
That is markup outputted from the WordPress' new block-based syntax (Background)
It's not quite HTML in that if you edit it, it would not render as you would expect; it will break, because the additional block code (not shown on the screen) expects only certain .
You have a couple options here depending how much time you want to devote to this:
Determine whether your has block styling options (borders, font, font-size, etc) already built-in to the block settings. Check the genesis blocks documentation to verify this. This will be the easiest option to do what you want but if you're asking this question, I'm guessing that the block doesn't have these options.
This is probably the best route to take:
In your group block container, on the right hand side, create a css class shown in this picture. Then, go to your theme's CSS; add a selector of that CSS class and begin adding the rules that you want. This may require some trial and error because you're likely need to write some additional selectors and increase the level of specificity so you can style exactly how you want it and override some other rules already written.
(You may also need to include !important as for your rules but that is a last resort and not a best practice for writing CSS)
You may also need to do this for the gb-newsletter block as well.
Writing your own blocks (which has frustratingly has a high learning curve, imho); this will offer the most customization but will be a LOT of time.
I'm making custom description in one listing on ebay.co.uk with just html/inline css. I tried to use external css link, but it's not working. Any help will be appreciated.
Inline css is working. External and Internal not working.
<link rel="stylesheet" href="https://github.com/....../css/style.css">
<p>some paragraph</p>
Please note ebay cut head and body tags, so I skipped them in the example.
You can't use a stylesheet or <style> tags, but you can use inline styles on divs.
<div style=""></div>
I've used gridsetapp.com in the past to create responsive grids, but on the one I've recently tried creating just isn't working and I can't figure out why.
The link to the css is here; https://get.gridsetapp.com/37722/
Just trying to get something basic:
<html><head>
<link href="https://get.gridsetapp.com/37722/" rel="stylesheet" />
</head>
<body>
<div class="d1-d5" style="background:#aaa">ffggg</div>
</body>
</html>
Any thoughts?
Despite an unusual CSS link, the browser should recognize the CSS file your referenced.
However, looking at your reference, you are just trying to apply CSS to the class d1-d5. However, as best I can tell, there is no exact match in the CSS file to Just d1-d5. Use the Development tools (F12 on most browsers); they are your friend. It will show you what CSS is applied at that moment including, any applied through JavaScript or Linked files.
With CSS, you need to make sure that you call out exactly what the browser can identify, but not more (unless going for a higher order of precedence). For example, the most you could call out to select your d1-d5 is:
html body div.d1-d5{...}
Whereas in you linked CSS file, I see a lot of parents or children when searching d1-d5, such as .d1-d5 .d1,.d1-d5 .d2,.d1-d5 .d3,.d1-d5 .d4,.d1-d5 .d5.
If you wanted the last one in this chain (.d1-d5 .d5), you would need an HTML such as:
<html>
<body>
<div class='d1-d5'>
<div class='d5'>
This text will have the CSS applied.
</div>
</div>
</body>
</html>
The CSS written as .d1-d5 .d5 literally means "select the element with class d5 as a descendent of an element with class .d1-d5". Your HTML doesn't match any of the classes in the CSS file, including the parent and child selectors. If you were to try the above HTML, you would see width:18.05273834%; applied (which isn't a very obvious thing to see... why not try background:yellow; or something like that for an easy verification).
Finally, why are you inline styling when you have the CSS? This is bad form, and only appropriate if you can't control the CSS file.
I'm using one of html5up.net's templates and when I add a stripe 'Pay by card' button, it's overridden by the css of html5up (see both jsfiddles below). I tried going through the css file and see if there's anything I could change to affect the button's appearance to no avail (the file is absolutely massive and I could use some steering from more experienced heads).
Jsfiddle of how the button is supposed to look like (no css loaded)
<title>Lalala</title>
<body>
<form action="/your-server-side-code" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="a public key"
data-amount="1000"
data-name="Lalala"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-zip-code="true"
data-currency="eur">
</script>
</form>
</body>
Jsfiddle of how it looks like with HTML5up's css, which is the same code as before plus this line:
<link rel="stylesheet" href="main.css" />
My question: Is there any simple way that I can have just the button be exempt from the css that I have loaded for the site? If not, how would you go about accomplishing that? A new class that has default settings in the css file?
Thanks!
Line 1897 of your CSS is describing styles applied to the buttons.
If you remove line 1923:
height: 3.75em;
It will look kind of ok (or just delete whole section from 1897 to 2050 and you will be fine).
I'm working on a site using Twitter Bootstrap, and want to put some content in a gray box or panel.
I mean much like the 'Basic block' example from bootstrap's own docs. Small screenshot cutout to display what I mean:
Except it's supposed to contain normal HTML content, no code or <pre> stuff or anything.
You can use a well for this. See docs.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="well well-sm">Well well well</div>