Jump to content
DOSBODS  
  • Welcome to DOSBODS

     

    DOSBODS is free of any advertising.

    Ads are annoying, and - increasingly - advertising companies limit free speech online. DOSBODS Forums are completely free to use. Please create a free account to be able to access all the features of the DOSBODS community. It only takes 20 seconds!

     

  • 0
IGNORED

Help with website mobile revamp - nice google search search box...


Alonso Quijano

Question

Alonso Quijano

Many years ago set up a community website (learned some html, css... just go on with it). A labour of love** rather than anything money-generating.

Anyway, it became quite significant locally with lots of information and records of meeting and events on it, however it is not mobile friendly and has become rather unwieldy (content needs to be stream-lined/sub-pages created)  and whilst I can work my way through the transition to make it more dynamic, there are little things that are holding me back. Whilst I use includes there are a lot of pages so a bit daunting considering **

I have a Google Custom Search that I am struggling to find anything to make it mobile friendly and sit as an expanding magnifying class in the header, maybe like the search here but doesn't need all the advanced search stuff.

Experimenting on one page with a table that zebra effect seems to effect the google search box - at a loss to figure it out?

/* table */
table {width:100%;font-size:90%; margin: 0px auto 12px;}
table, th, td {border: 1px solid green; border-collapse: collapse;}
th, td {padding: 2px 6px; text-align: left;}
th.center,td.center {text-align:center;}
table#t01 tr:nth-child(even) {background-color: #bbdb88;}
table#t01 tr:nth-child(odd) {background-color: #fff;}
table#t01 th {background-color: green; color: white;}
tr:hover {background-color: #fff99d;} /* animate when hovering */

This code works in the <head> <style> part of the webpage but is not 'seen' in the stylesheet. Ideally I'd want it be unique as there are other tables across the website. Bit flummoxed!

I don't want to dox myself but... it would be nice to bring it more up to date.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

If you have an embedded Google search widget you'll need some trickery to change how it displays. If you post a link to the page, what's wrong, and what you want to see, it would be easier for people to look at it and advise?

  • Cheers 1
Link to comment
Share on other sites

  • 0

How many pages in total? If you're doing a re-design I would perhaps consider a site generator framework like Hugo or Jekyll (https://jamstack.org/generators/) Might be a bit of learning curve though.

I'm making a big assumption here on the site, however, I suspect it will be easier, quicker and cheaper for you to go to some freelance website and pay for someone to make the changes for you.

Or if you do want to do it yourself consider buying a template (https://themeforest.net/category/site-templates) and copy paste the existing pages. Job done.

Edited by A_P
  • Cheers 1
Link to comment
Share on other sites

  • 0
Alonso Quijano
On 10/07/2022 at 12:32, Alonso Quijano said:

/* table */
table {width:100%;font-size:90%; margin: 0px auto 12px;}
table, th, td {border: 1px solid green; border-collapse: collapse;}
th, td {padding: 2px 6px; text-align: left;}
th.center,td.center {text-align:center;}
table#t01 tr:nth-child(even) {background-color: #bbdb88;}
table#t01 tr:nth-child(odd) {background-color: #fff;}
table#t01 th {background-color: green; color: white;}
tr:hover {background-color: #fff99d;} /* animate when hovering */

This code works in the <head> <style> part of the webpage but is not 'seen' in the stylesheet. Ideally I'd want it be unique as there are other tables across the website. Bit flummoxed!

Didn't seem to work initially but just seen that the above in the stylesheet is working across the site affecting all tables and the search box. (Ctrl+ refresh was needed!) Taken that css out of stylesheet for now.

The table code needs a class that works with the zebra effect and the #01 (the hovering doesn't work with the zebra stripes?).

As for the search box

Currently it is like this (width 25%):

109265579_SearchBoxbefore.jpg.0b95af6b9bcf013f779daf08bc4193a8.jpg

The above table code makes it do this!

779659077_SearchBoxafter.jpg.9d102e5d7a53675a5325e9576cc9cc09.jpg

I'd like the search box to be slimmer (no padding) to go a in a div at top of page (an example - won't be those colours):

62226095_searchboxIOMSPCo.jpg.5712ae1e1cd0add843225212773ec066.jpg

Mobile transformations inactive/active >> 

2131346765_Searchmobile.jpg.5cc6eb235a49536e6c46e4e3402f4933.jpg  >> 189410130_Searchmobileactive.jpg.081072655b1f2a4f5bd0e8be2997caf1.jpg

 

 

Link to comment
Share on other sites

  • 0
Alonso Quijano

I've managed to sort out the table css issues using (multiple) classes, it's now working as it should be and not affecting other elements!

Quote

/* ##### tables ###### */
table.zebra {width:100%; font-size:90%; margin: 0px auto 12px; border: 1px solid green; border-collapse: collapse;}
th.zebra, td.zebra {padding: 2px 6px; text-align: left; border: 1px solid green; border-collapse: collapse;}
th.center,td.center {text-align:center;}
tr.zebra {background-color: #bbdb88;} /* even */
tr.zebra2 {background-color: #fff;} /* odd */
tr.zebra3 {background-color: green; color: white;} /* header */
tr.zebra4 {background-color: #808000; color: black; line-height:1.0em;} /* footer */
tr.zebra:hover, tr.zebra2:hover {background-color: #fff99d; color:black;} /* animate when hovering - not header */

Just a nice dynamic search box for Google Custom Search needed.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...