BP Profile Search › No CSS, how to make a table
-
Post
-
I have no css on the page where users can enter the values to find others. I am trying to make a table using css, is this possible? I have done some researching first and one answer I am finding is to use <div> tags. However what I was unable to find is when using the <div> tags how can I select parts of the html code that I see when I right click my matchmaking page. Ultimately I want selections to be places in columns
Thanks for any help you can give
Hi Andrew,
Yes, it’s possible to make tables with divs and CSS, but why bother?
You can use a real HTML table here, because you really need to display a table of fields in your search form. The use of HTML tables is deprecated to make layouts, but it’s perfectly legal when you have to display… a table!
Anyway, if you don’t like HTML tables, this page explains how to make a table with divs and CSS:
http://collaboradev.com/2014/07/07/never-use-html-tables-ever/
Thanks for replying!
You answering this has brought up another question.
From my understanding when I inspect the page all I see are a list of <div>. I have everything in a child theme, and all the edits I have done are in the style.css which is why I asked how I could make the table using css.
You bring up why not do it with html, well my question to that is
1) how could I style a page that is made by your plugin with html?
2) What page am I going into to change so that my fields are placed into a table?Perhaps I just need a better understanding of programming? I am more than willing to learn by any articles you recommend I read. I just have been having trouble trying to google this question as it’s hard to explain. The only luck I have had with was googling “how to syle <div> using only css” because css is the only control I believed I had (with my skillset).
Thanks again for your help it’s tremendously appreciated
Andrew,
Yes you need some programming skills to tweak the form appearance. The options you have are:
1. Keep using one of the built-in form templates, and customize it by adding some CSS to your theme’s style.css;
2. Edit one of the built-in form templates, so you can fully customize even the generated HTML code.
Unfortunately I’m not a CSS expert, so I can’t tell if you can use the simpler first method or if you need the more complex second method to get your required result, but in both cases you need some programming skills. To use the first method you must be very familiar with HTML and CSS, and to use the second you must be very familiar with PHP too.
