The "No Dev Question is Stupid" Thread - Basic HTML / CSS / Etc.

Ryuzaki

Ryuzaki

お前はもう死んでいる
Moderator
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
6,244
Likes
13,129
Degree
9
I've seen several times around the forum of people saying they struggled with a basic concept that any number of us could have answered in 30 seconds time, saving them hours.

Of course, nobody should be spoon fed but there's no reason to lose hours when being pointed in the right direction with the right context can still teach while saving that time. Time is all we have!

So if you find yourself with a basic developer question, feel free to ask here. I'm sure the pro's in this section won't care since we're keeping it all in one thread!
  • "How do I add space around this picture with CSS?"
  • "How do I use HTML to make a link open in a new tab?"
  • "Can someone explain what this HTML line does, why it goes in the header, and what I need to do in the CSS to activate it?"
That kind of stuff. HTML, CSS, PHP, jQuery, MySQL, whatever! In this thread, it's all gravy.
 
Code: 
// Get Rid of WP Version Footprint Throughout Site
function ryu_remove_version() {
return '';
}
add_filter('the_generator', 'ryu_remove_version');

I just saw this in another thread. Loved the thread but don't know where exactly I can copy and paste this and other codes to? header.php? functions.php? another place?

As always, I appreciate your help.
 
That goes in your functions.php

Edit: let me expand on that to give you some more info. What you've pasted above is php code. You'll see php code wrapped in <?php code... ?>

When pasting that in your functions file, you'll notice at the top of the file it starts with <?php and ends with ?> down at the bottom. You just need to paste the code in between somewhere.

The line that starts with // is a comment which is very handy to keep notes on what things are doing. Your functions file can get quite large, so documenting is key.
 
Hey Ryu
Woocommerce: On the checkout page I want to move the email field first on the list (it is after the name and last name field atm). How could I do that? Thanks!
 
@Mpire, I've never used WooCommerce so I pulled up their demo on their site. You'll need to identify which PHP template is being used to populate the form, first and foremost. Then it'll be as simple as cutting and pasting the right HTML lines.

It'll be tucked in the <div class="woocommerce-billing-fields"> HTML wrapper. You'll see a <p class="form-row... etc..." id="billing_email_field"> that you'll want to cut and paste above the corresponding <p> for the first and last name sections.

Keep in mind, if you want to do this you should either set up a child theme or take notes on what you did. When you update your theme or WooCommerce your change will be reverted back without a child theme in place.
 
Best way to have the current year display in a wordpress h1 tag without creating a new post template with a fixed position? Yoast %%currentyear%% variable works for the meta title, but not h1.

Edit: Also, how inefficient are wordpress shortcodes for reusing html? Like, creating [dog] and using it 50 times in a post [dog name='Terrier' weight='1' title='Little Dogs w....']Paragraph[/dog] so that everything is uniform and your page isn't 80% html.
 
Last edited:
Nat said:
Best way to have the current year display in a wordpress h1 tag without creating a new post template with a fixed position? Yoast %%currentyear%% variable works for the meta title, but not h1.
Click to expand...
PHP: 
<h1><?php echo date("Y"); ?></h1>
Prints 2017 inside a h1 tag - is that what you needed?
 
Michael said:
PHP: 
<h1><?php echo date("Y"); ?></h1>
Prints 2017 inside a h1 tag - is that what you needed?
Click to expand...

Ideally was hoping for a way to do it from the wp-admin editor. I'm trying to avoid having to use a custom template file that hard coded an echo. I believe that would work only if the date needed appear at the beginning or end every time.

I guess I could make a template that throws the page_title('') into a variable, checks for %%year%%, explodes it at %%year%%, inserts date("Y"), and then rejoins it. Figured I might be stupid though and miss something already built in.
 
Nat said:
Ideally was hoping for a way to do it from the wp-admin editor. I'm trying to avoid having to use a custom template file that hard coded an echo. I believe that would work only if the date needed appear at the beginning or end every time.

I guess I could make a template that throws the page_title('') into a variable, checks for %%year%%, explodes it at %%year%%, inserts date("Y"), and then rejoins it. Figured I might be stupid though and miss something already built in.
Click to expand...
I thought that was too easy of an answer, my apologies. I use a framework so I'm used to hooking PHP wherever on the fly.

Where do you need it to go? The code below inserted the date code into the header (tested). It goes into your functions.php file.

PHP: 
function yearInject() {
    ?>
 <h1><?php echo date("Y"); ?></h1>
    <?php
}
add_action('wp_head', 'yearInject');
 
8yicd1.jpg


Working on a new site for a friend... why is this happening when I try to put Wordpress into Cpanel?


Thanks!
 
Bee said:
why is this happening when I try to put Wordpress into Cpanel?
Click to expand...

There are a few possible reasons for this, but the main ones are that either the MySQL module for PHP isn't installed or there is a configuration problem that's normally related to a PHP/Wordpress version change (PHP 7.0 probs are common). Another possible problem is that cpanel requires some kind of odd sacrificial offering to make it work properly (you can tell I'm not a cpanel fan).

In any event, the fix normally requires basic knowledge of the command line. If you're comfortable with that, then it's usually an easy fix. My recommendation is to contact the support dept of your hosting company first. If they can't help and you still have problems, I'd be glad to help if you have SSH access to the server.
 
Is it possible to modify the size of body text selectively without using H1 - H6 tags?

So for example I want a subtitle to be the size of a H1 but I don't want to use the H1 tag multiple times or even be a heading?

For example:

http://imgur.com/a/W2eV9
^
I linked the image opposed to upload as I must have compressed it wrong as the file size is still too big even though the image quality is terrible.
 
@Jackv94, This is done through CSS. It is the type of front-end code that styles HTML markup.

What you could do is create a CSS class, something like...

<div class="h1-mimic">What I want to look like an H1</div>

That is HTML. Then you'd need to go to your CSS file and copy the H1 attributes and paste them for your new class, which you would have to add like...

Code: 
.h1-mimic {
    font-size: 20px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 15px;
}

That's how you'll accomplish this. It's how every website is styled, with no exceptions.
 
@Jackv94, easiest would be wrap it in a <span> and give it a unique class. Then, if it's something you'll reuse often, you can easily create a line of CSS to add to your main CSS file, changing the font size for just that specific class.

Spans are really useful for this sort of thing, as they usually don't have some of the same default CSS or HTML behavior that certain other elements, like <p> tags might. A lot of times, if you use something like a <p> tag, there may be differences in line spacing, padding, margin, or other differences you might not want. Spans are usually pretty minimal by default, unless maybe you're using a theme that's already been highly customized.
 
Ryuzaki said:
@Jackv94, This is done through CSS. It is the type of front-end code that styles HTML markup.

What you could do is create a CSS class, something like...

<div class="h1-mimic">What I want to look like an H1</div>

That is HTML. Then you'd need to go to your CSS file and copy the H1 attributes and paste them for your new class, which you would have to add like...

.h1-mimic {
font-size: 20px;
font-weight: bold;
margin-top: 15px;
margin-bottom: 15px;
}

That's how you'll accomplish this. It's how every website is styled, with no exceptions.
Click to expand...

Thank you @Ryuzaki I really appreciate that, especially giving me the exact code I need, will give that a go now.

turbin3 said:
@Jackv94, easiest would be wrap it in a <span> and give it a unique class. Then, if it's something you'll reuse often, you can easily create a line of CSS to add to your main CSS file, changing the font size for just that specific class.

Spans are really useful for this sort of thing, as they usually don't have some of the same default CSS or HTML behavior that certain other elements, like <p> tags might. A lot of times, if you use something like a <p> tag, there may be differences in line spacing, padding, margin, or other differences you might not want. Spans are usually pretty minimal by default, unless maybe you're using a theme that's already been highly customized.
Click to expand...

Thanks @turbin3 I will read more into spans, yeah I think it will be something I want to use often so will be worth while doing that.

Do either of you have any recommendations on learning? I currently feel like I'm at the cliff of confusion decribed here:
https://www.vikingcodeschool.com/posts/why-learning-to-code-is-so-damn-hard
The Cliff of Confusion is the painful realization that it's a lot harder when the hand-holding ends and it feels like you can't actually do anything on your own yet.
Click to expand...
And I'm only trying to learn HTML and CSS ha.
 
This quote from Ryuzaki, on another thread, perfectly sums up the mindset you want to approach this stuff with, to get the best results.

Ryuzaki said:
As an solo-preneur you will need some skills in every category, but the best and most efficient way of learning them is to wait until you encounter them in your projects. This way, you're only learning exactly what's applicable (and will be generalizable) AND you have context around it, which will make sure your brain is wiring those neural pathways.
Click to expand...


The thing that's overwhelming with HTML, CSS, JS, especially as a beginner, is that there is practically no limit to them. One thing that will help when starting out, is convincing yourself to not worry about "learning all of it". Instead, think about that quote. Of course, you do want to learn some basic fundamentals. Much beyond that, though, I find that it helps to approach individual problems or goals.

You have something you want to accomplish. You might not yet know how or even the proper terminology to search with. That's fine. Just identify the basic problem, try to start putting it into words, and experiment with different search queries for it. What you'll notice is, you'll start seeing a handful of recurring sites pop up in search results, often with answers for those problems. Sites like Stackoverflow, css-tricks.com, hongkiat.com, etc. You'll even find interactive sites, such as codepen.io, where you can actually play around with the code and see the effects live on that site!

The point I'm getting at here is, you don't have to solve all-the-things. You just have to solve the small one in front of you, then move on to the next one. Learning in this manner, as @Ryuzaki, expertly summarized, is very effective in that the experience is surrounded with great context and a healthy dose of the actual application.

So as far as some courses, here are several as well as some YouTube channels. Generally, for these subjects, I'd recommend courses or videos that aren't much longer than 1-2hrs, and preferably a lot less. There are a lot of courses out there that are dozens of hours, which for the purposes of a beginner and simply learning to tackle individual problems, is excessive.

https://www.codeschool.com/learn/html-css
https://teamtreehouse.com/library/html
https://teamtreehouse.com/library/introduction-to-html-and-css
https://www.codecademy.com/learn/web
https://www.youtube.com/playlist?list=PLlj9BrHKq9WKaz8UV3BjEqicn-C3qHxy4
https://www.youtube.com/user/DevTipsForDesigners
 
@turbin3 that reply made me realise that I am going along the right path currently, thank you.

The overwhelming factor 100% comes from the fact that you can do almost anything.

I guess as I continue to improve that my search queries will also become better as I tried googling for that and couldn't find any information but if I knew that I needed to either use a <span> or a div class then I would have been 1 step closer to finding the answer I required.

Thanks also for the resources, especially the two youtube links.
 
Hi! I want to add a javascript countdown on my checkout page
How can I add this script on the checkout page ONLY? I'm using Wordpress, don't want to add a plugin for this
See http://jsfiddle.net/robbmj/vpq5toeq/4/ The one that doesn't restart, I know how to add the HTML, but not the JS.

Thanks a lot
 
Mpire said:
Hi! I want to add a javascript countdown on my checkout page
How can I add this script on the checkout page ONLY? I'm using Wordpress, don't want to add a plugin for this
See http://jsfiddle.net/robbmj/vpq5toeq/4/ The one that doesn't restart, I know how to add the HTML, but not the JS.

Thanks a lot
Click to expand...

You need to determine the slug or ID number of the checkout page, then insert that script in the footer wrapped in an if loop:

PHP: 
<?php if( is_page( 'checkout' )) { ?>
   <script>
      your long script
   </script>
<?php } ?>

That should get you close. You'd put this in the footer or put it in its own JS file and call it from the footer. It'll make sure the script only runs on the checkout page (change that bit in is_page() to the ID of the page without quotations or change it to the right page slug with quotations).
 
What do these static-site generators that @turbin3 has been talking about have over old school html or php files? If my content is sitting in Folder1, couldn't I just code a simple bash script to inject stuff into these files and save them into a new folder.
  • Script writes javascript / php include () statements at certain points within content to render newsletter opt-in boxes, ads, analytics code etc.
  • All content is injected into a responsive html template & all images auto-scale via css.
That gets dumped into Folder2 and is uploaded via FTP to the server. If the site needs a tweak, change desired parameters in the bash script, regenerate and upload /replace old site.

Static home page, 'blog' page uses file time stamp for post date. Don't want comments, while forms and other functionality can be handled by 3rd party services.

turbin3 said:
Workflow is the other major issue of course, as you mentioned. By far, Hugo is my favorite when it comes to SSG's. Combine it with NPM, Gulp, and maybe a few other plugins, then create a few script commands of your own in your package.json, and it's pretty easy and efficient to streamline your dev/build/deploy process.
Click to expand...

Yeah, but I just see "shit I have to learn" x 3, plus probably github too . What would my ghetto bash mail-merge ftp system be missing vs. learning to use a proper site generator?
 
A generator might not really do much for you, as it sounds like you already have your own setup pretty well in order. I guess the main attraction with some of these generators is in them providing a bit more of a structure to work from, so there might be a bit less guess work, at least for the average use. Though, by no means are they entirely necessary or recommended for everyone.
 
If I buy an html template from themeforest, will it be more or less the same as using a flat file system since their is no database?

Trying to learn how to use grav etc but Ive got no idea how to build the site i want
 
built said:
If I buy an html template from themeforest, will it be more or less the same as using a flat file system since their is no database?
Click to expand...

Hmmmm, depends what you are trying to accomplish. For a small site (like several pages) you could probably get away with it, but doing anything at scale with flat files like that is going to become a giant pain in the ass real quick. If doing anything of size you'd want to modify the theme and use a generator.

Keep in mind as well that these pre bought themes need some work to become production ready, there was a thread recently about this.
 
There may be an easier way, as I'm not as familiar with that plugin. Here's an off the wall idea though. Might be something interesting that could work, possibly using the CSS "display: table" property. Might need to rig it with "nth-child" or something else to determine what is in what column, though I'm not sure if that will be feasible or not for your use case. Might also need to do a few media queries. Here's a few good articles on display: table:

https://colintoh.com/blog/display-table-anti-hero
https://www.sitepoint.com/solving-layout-problems-css-table-property/
 
You must log in or register to reply here.
Back