Text Widget
-
I have made a text widget for one of my sidebars. I need the text to be in a list format, without bullet points or horizontal lines. Is there anyway of doing this? Currently the list isn’t on separate rows. The only way I’ve managed to do it is using
, but it causes a horizontal line that I don’t want.
The blog I need help with is: (visible only to logged in users)
-
Hello there! Unfortunately, the html code was stripped out of your note, so I cannot see what you’ve tried so far. However, if you want a simple list of items with line breaks between them, you can use the <br> code seen here:
http://www.w3schools.com/tags/tag_br.aspI hope you find this helpful. Let me know if you have other questions.
-
Perfect! Thank you very much!
Another question…
How do I get a Facebook follow button? I’ve managed to find and add a twitter button onto my page, but I can’t seem to find how to add a Facebook or Instagram button?
-
-
Hi there!
To find buttons that look great together, design-wise, I suggest this link:
http://www.designrazzi.net/2014/social-media-buttons/Here’s more info about adding those cohesive social media buttons to your site:
http://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer/Any other questions? Let me know!
-
Thank you for your help! You’ve been great!
I do have another question though! (I’m very new to all of this as I’m sure you can tell).
I am looking to make a price list that looks somewhat similar as displayed on this site here http://www.pinkgloss.co.uk/hair.html
Could you direct me on how to do this?
-
Hi there,
The price list on the page you mentioned is made with an HTML table. We have some tips for creating HTML tables here: Using HTML
If you’re new to HTML, you might also want to check out these more detailed explanations about HTML tables:
http://www.w3schools.com/html/html_tables.asp
http://www.quackit.com/html/html_table_tutorial.cfm
To see an example of the code, here’s the HTML used to make the “Stylist” price list on that page you mentioned:
<table border="0" cellpadding="0" cellspacing="0" class="price-list-table"> <tr> <td width="220" class="table-col-header"><h1> Styling</h1></td> <td width="90" class="no-border-left"> </td> <td width="90" class="no-border-left"> </td> </tr> <tr> <td width="220"> </td> <td width="90">Stylist</td> <td width="90">Principal Stylist</td> </tr> <tr class="highlight"> <td width="220">Ladies Cut & Finish</td> <td width="90">£35</td> <td width="90">£40</td> </tr> <tr> <td width="220">Ladies Re-style</td> <td width="90">£40</td> <td width="90">£46</td> </tr> <tr class="highlight"> <td width="220">Gents Cut & Finish</td> <td width="90">£25</td> <td width="90">£25</td> </tr> <tr> <td width="220">Blow dry (short)</td> <td width="90">£25</td> <td width="90">£25</td> </tr> <tr class="highlight"> <td width="220">Blow dry (long)</td> <td width="90">£28</td> <td width="90">£28</td> </tr> <tr> <td width="220">Hair up (from)</td> <td width="90">£30</td> <td width="90">£30</td> </tr> </table>I hope this helps you get started! :)
-
I’ve managed to set up a basic looking table :) I’m completely new to HTML so you have really helped, thank you!
Sorry to be a pest, could you explain to me, now that I have my table, how I colour each alternating line in a colour of my choice?
Also, I would like to write some text at the bottom of my price list page, that links to my special offers page. I have tried looking up how to do this, and I think I need the page ID to input into the HTML. I’m not sure how I find the page ID?
-
That table is looking great! To add a background color to your table, you can use the CSS “background-color” property. I’ll give you some examples so you can see how it works.
To add color to a single table cell, you can add the CSS to one of the td elements like this:
<td style="background-color:red;">To add color to a whole row in a table, you can add the CSS to one of the tr elements:
<tr style="background-color:red;">You can either use color words (like “red”) or hexadecimal color codes (like “#FF0000” – the hexadecimal code for the color red). You can find a list of some color words and hexadecimal codes here: http://www.w3.org/TR/css3-color/#svg-color
We also have more references for getting started with CSS (if you’d like to keep learning more about what it can do) at these links:
And we have a CSS Customization forum where you can post and get CSS tips from expert staff and volunteers: https://en.forums.wordpress.com/forum/css-customization
Also, I would like to write some text at the bottom of my price list page, that links to my special offers page. I have tried looking up how to do this, and I think I need the page ID to input into the HTML. I’m not sure how I find the page ID?
You actually don’t need the page ID for that. You can insert a link to another page on your site with the link icon in the page editor. We have more about how that works here: Links
Just let me know if I can do anything more to help. :)
-
That’s perfect! I’m getting somewhere!
On my table, my rows are too big in height. I have tried changing it using height=”” but there seems to be a minimum set. Is there anyway I can make the rows a bit thinner?
Also, when you go onto my webpage, the logo within the web address bar at the top is the WP logo. Can this be changed?
-
On my table, my rows are too big in height. I have tried changing it using height=”” but there seems to be a minimum set. Is there anyway I can make the rows a bit thinner?
So what’s happening with your row height is that the height is stretching to fit the height of the content in each table cell. And the table cells are being padded to include some extra space around the content.
That’s done with this CSS code (part of your theme’s CSS):
th, td { padding: 0.6em; }In CSS, 1em is equal to the height of the font size you’re using. You can learn more about units in CSS here: http://www.w3schools.com/cssref/css_units.asp
To change that padding using custom CSS, go to your My Blogs page and click the Customize link under the blog’s title. In the Customizer, open the CSS section and in the CSS editor there, you can paste in the following CSS:
th, td { padding: 0.3em; }That will reduce the padding around the contents of each table cell so it’s 0.3em instead of 0.6em. (You can change that value to get just the right amount of padding that you want.) Adding it to the CSS section in your customizer will apply the change to every cell in your table at once, so you don’t have to add it to each one separately.
Also, when you go onto my webpage, the logo within the web address bar at the top is the WP logo. Can this be changed?
Yep! You can replace that logo by adding a Blavatar under Settings > General in your site’s dashboard. You can upload a new logo under “Blog Picture/Icon” in the upper right of that settings page.
-
That’s awesome thank you!
I have been trying for days to get my logo next to my company name at the top of my page. I’ve looked everywhere but can’t find a way to do it. I want it on the left hand side of the header. Is there a way of doing this?
-
Yes, you can do that. :) With the Motif theme you’re using, you can upload a logo that’s up to 320 x 110 pixels.
To do that, you can start on your My Blogs page and click the “Customize” link under your site. In that customizer, go to the Header section and you’ll be able to upload your logo there.
If the logo doesn’t end up exactly where you want it in relation to your company’s name, I’d recommend posting in the CSS Customization forum here:
https://en.forums.wordpress.com/forum/css-customization
They can help you use CSS to get the logo right where you want it in the header. Let me know how that goes! :)
-
Thank you! I’ve added the logo, but it’s sitting above my company name. I have posted on the forum you’ve provided. I’ll let you know how I get on :)
-
In my gallery I want to show my images below the gallery. I have added them as thumbnails, but they are spread all over the place. I’d like there to be rows of 3 images, but I can’t seem to get them to be next to each other. How do I do this?
-
Do let me know how it goes with the logo. :)
For the gallery, there are a bunch of different image gallery styles you might want to check out: http://en.support.wordpress.com/images/gallery/#examples-of-gallery-styles
The default thumbnail gallery and the square gallery types might be more of what you’re looking for. How do those look to you?
-
Hello,
I am trying to get my contact page to look something like this http://www.divahairdesign.co.uk/contact/
I have entered my information, but I couldn’t get the information to be split into columns, so I’ve entered all of the information into tables. After doing this, I have aligned one table to left and one to centre, but one is still below the other. I also want the contact box to be on the right of the page rather than below the information. Could you help with doing this?
Also, with the comment box, I would like to change the colours of the backgrounds and the text, and also, in the Name field, it automatically completes it with my wordpress username. Can I change this?
-
The contact page you linked to is using a WordPress theme that’s designed to set up those sorts of columns for you (like the columns in your site’s footer), so you’ll need to use an approach like a table to get that effect on your site.
Because you’ve used a number of separate tables, those tables are automatically set with margins to keep them from appearing side-by-side. Instead of using separate tables, I’d recommend setting up a single table with multiple columns, so that each column appears next to the others.
Also, with the comment box, I would like to change the colours of the backgrounds and the text, and also, in the Name field, it automatically completes it with my wordpress username. Can I change this?
You can change all of the colors in the contact form using Custom CSS — that’s something the folks in the CSS Customization forum can help out with, if you need.
Contact forms are designed to automatically fill in the details of anyone who is logged in to a WordPress.com account. So when you look at the form, you’ll see your details there, but other WordPress.com users will see their own details there. :)
-
Hello,
In the footer of my website, I have a google map showing the location of my Salon. I would also like to have the map on my Contact Us page, within the first column. Could you advise me how to get it here? And if I can edit the size of it?
-
Sure thing! Adding Google maps to a page is a bit different from adding them with that footer widget. We have a guide for embedding maps on a page here:
When you’re creating the Google map, you can choose the size of the map you want to embed. (There is more information about how to do that at the link above.) If you get stuck or can’t get it to work the way you’d like it, just let me know. :)
- The topic ‘Text Widget’ is closed to new replies.
WordPress.com Forums 