Wordpress CSS + JavaScript
- or -
Post a project like this2208
£50(approx. $63)
- Posted:
- Proposals: 7
- Remote
- #1950770
- Awarded
Asp.Net | Laravel | Android | iOS | Flutter | PHP | Wordpress | Woocommerce | C#.NET | Graphics & Web Design | SEO
Ahmedabad
Wordpress Theme, Plugin | Responsive Design | woocommerce | OpenCart | PSD to Wordpress
Dhaka
***Expert Web Designer and Developer** || Laravel, PHP, WordPress, HTML-CSS-JS Expert
Dubai
5772675634437585791744975197945721181872125419
Description
Experience Level: Intermediate
Estimated project duration: 1 day or less
Hi and thanks for looking at this job.
This is mostly a CSS styling job, but some tasks might require custom JavaScript. Please keep that in mind when applying. Note our account already has a plugin that allows you to add custom JavaScript to the header and body of the pages.
Implementation is in Wordpress. We will provide you with a login into our account. The page and table you’ll need to style can be previewed here: http://bit.ly/2GkwGBt
Note you will need to document your work, providing clear guidelines for us to use the new CSS after your work in completed.
You can find below a detailed description of the job, any questions please let us know.
Summary of the task:
- Creating custom CSS to style table objects in Wordpress
- Table type is custom based on a Wordpress plugin we have on our account. It’s a plugin that reads a Google Sheet and displays that into a Wordpress page.
- You can reference the following link for all the CSS hooks and classes that the table allows https://wordpress.org/plugins/inline-google-spreadsheet-viewer/
Two visual styles:
- When creating new tables in Wordpress, we need to be able to apply two different table styles.
- Let’s call style1: “Normal", style2: “Featured"
- style1: “Normal” should look like this: https://colorlib.com/etc/tb/Table_Responsive_v2/index.html. The CSS for this example can be downloaded here: https://colorlib.com/download/295/
- style2: “Featured” should look similarly to the above, but with a different cell colour, mouse hover colour, and a bigger font.
Each row on tables should be clickable:
- When creating a new table, we will add a column at the end of the table with a URL. This URL will be different by each row.
- Then, we need each row of the table (the entire row area) to be clickable and point the visitor to that same url defined on the last column.
- Lastly, this last column with the url should not be visible on the table.
Text display:
- The header of the table should be hidden
- Important: The text on each row should display as a sentence. This will require transforming the output from the table from individual cells, to a full sentence in one single row.
- Example: Rather than showing: | Marketing Manager | at Acme | in London | with lots of spacing between the values, the output would read as a sentence: Marketing Manager at Acme in London
Search bar:
- There’s a search bar at the top of the table. This should be styled in the same way as the table.
- It should be center aligned, and taking the full width of the table.
- Add a placeholder text within the bar that says: "Search by position, company or location"
Other elements:
- Item at the top: "Show 10 entries” should be removed
- Item at the bottom: “Showing 1 to 8 of 8 entries” should be removed
- You will notice the first column on our table is meant to display an image, but it’s only showing the url not the image. This will need to render properly within the table cell.
This is mostly a CSS styling job, but some tasks might require custom JavaScript. Please keep that in mind when applying. Note our account already has a plugin that allows you to add custom JavaScript to the header and body of the pages.
Implementation is in Wordpress. We will provide you with a login into our account. The page and table you’ll need to style can be previewed here: http://bit.ly/2GkwGBt
Note you will need to document your work, providing clear guidelines for us to use the new CSS after your work in completed.
You can find below a detailed description of the job, any questions please let us know.
Summary of the task:
- Creating custom CSS to style table objects in Wordpress
- Table type is custom based on a Wordpress plugin we have on our account. It’s a plugin that reads a Google Sheet and displays that into a Wordpress page.
- You can reference the following link for all the CSS hooks and classes that the table allows https://wordpress.org/plugins/inline-google-spreadsheet-viewer/
Two visual styles:
- When creating new tables in Wordpress, we need to be able to apply two different table styles.
- Let’s call style1: “Normal", style2: “Featured"
- style1: “Normal” should look like this: https://colorlib.com/etc/tb/Table_Responsive_v2/index.html. The CSS for this example can be downloaded here: https://colorlib.com/download/295/
- style2: “Featured” should look similarly to the above, but with a different cell colour, mouse hover colour, and a bigger font.
Each row on tables should be clickable:
- When creating a new table, we will add a column at the end of the table with a URL. This URL will be different by each row.
- Then, we need each row of the table (the entire row area) to be clickable and point the visitor to that same url defined on the last column.
- Lastly, this last column with the url should not be visible on the table.
Text display:
- The header of the table should be hidden
- Important: The text on each row should display as a sentence. This will require transforming the output from the table from individual cells, to a full sentence in one single row.
- Example: Rather than showing: | Marketing Manager | at Acme | in London | with lots of spacing between the values, the output would read as a sentence: Marketing Manager at Acme in London
Search bar:
- There’s a search bar at the top of the table. This should be styled in the same way as the table.
- It should be center aligned, and taking the full width of the table.
- Add a placeholder text within the bar that says: "Search by position, company or location"
Other elements:
- Item at the top: "Show 10 entries” should be removed
- Item at the bottom: “Showing 1 to 8 of 8 entries” should be removed
- You will notice the first column on our table is meant to display an image, but it’s only showing the url not the image. This will need to render properly within the table cell.
Bill P.
100% (4)Projects Completed
2
Freelancers worked with
2
Projects awarded
60%
Last project
29 Jun 2018
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies