I have a website where a user chooses a template of their choice for their web page.
Once they've selected the template, I want them to be able to change some of the styles such as the font colour etc?
Is there a way I could do this?
I thought of perhaps storing the user specified stuff in a field in a database and then retrieve it and display as internal CSS?
You may use a user.css (initially empty) for each user and then add data provided by user with !important override.
Yes
It is possible. But you will have to rely on Javascript to add the stylesheet, url selected.
Assuming you would be using a link to change the theme, using jQuery, you would do
$('#red').click(function (){
$('#linktagid').attr('href','user_red.css');
});
Related
I am new to HTML/CSS and in this project intend to create a simple web page in such a way that each page links to three other HTML pages.
<div id="mySidenav" class="sidenav">
Home Page
about
Projects
Contact
</div>
My questions:
Is it possible to link to other pages other than the page itself via
programming (to write if page_name == link.html then exclude it from
the links)? e.g., I want to tell my HTML that if I am in the "about"
page, don't add the link to this page.
If that is possible, how I can fill the self-link button without using JS.
Yes, it possible. First, you have to know about PHP. Then get the current page url by $_SERVER['REQUEST_URI'].
IF the current page url is matched with your link like about.html then ignore the link for the same current page.
Otherwise, you can create a separate page with ignoring link. Like when you at about page ignore that link.
The short answer is no. HTML isn't a programming language and has no flow control or logic capabilities. You could achieve this via server-side rendering (express or php or whatever) or via static site generation (gatsby, etc.).
Otherwise you could (of course) modify the nav on each page accordingly, but I understand and agree that that's less than ideal.
This is a bit of a stretch, but you could link to homePage.html#homePage and use the CSS :target pseudo-selector to hide the current item or give it special css treatment, but this is sort of a brittle hack and it will break down if the fragment (#homePage, #projects, etc.) isn't present in the browser's url.
I know it's probably not possible, but I want to be able to create a file of some kind that will automatically disable part of a website's CSS. Basically, when I go to the site, I want this to be disabled instantly:
Is there any way this can be done?
Check out userstyles.org – they have a browser plugin called 'Stylish' which you can use to apply custom CSS to a particular site. For example, the CSS style that would do what you want here is:
.roundfield .usertext-edit textarea {
background: none;
}
If you need to do this for all website, you will need to Build a Chrome Extension, or Firefox Extension, those will help you to access every website's html/js/css. Then you can simple use a small javascript to disable everything you want.
Yes using jQuery disable the elements on page load or set the css as empty.
$(document).ready(){
$('#target_element).css();
}
It looks like you're using Chrome. You can edit Chrome's user style sheet and override the style of any site. Put the URL about:version in the search bar and note the "profile path". Browse to the profile path (e.g. C:\Users\you\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets) and in your profile folder open the user style sheets folder. Look for a file called custom.css and add your styles (e.g. .roundfield .usertext-edit textarea { /* your css here*/}). Note that you may need to use the dreaded !important declaration in your rule to override the rules of the site you're targeting.
yes, it can be achieved with javascript/jQuery, on page load target all elements with the specific class and set their background to none.
I'm wanting to find out how I change my form title from an h2 tag to an h1 tag from the Wufoo forms builder. I've been looking everywhere on their documentation and can not find out an answer.
You can't change the markup of a form HOSTED by Wufoo. But if you download the HTML/CSS (avaialble in the code manager, the same place you get the embed code), you are free to change that tag. Or, you can use Custom CSS to make that h2 look any way you want.
I'm not entirely sure you can do that... many of those "pre-made" type sites won't allow much customization. You might want to try to make your own form with the HTML <form> tag.
you can download the embedded code provided for developer, you will get a .zip file, edit index.html file, edit form according to your needs, but do not change actual, name, type, method, action, value fields, add CSS classes you want and finally you are are ready to in your site, it work fine. I am using it on 30+ websites.
Hai,
I have one file upload form in an HTML file. The code is like:
<form>
Select File:<input type="file">
</form>
How can I have only one button (or a link) to upload a file, without having this normal textfield and a browse button? GMail achieves this, but I don’t know how.
How about this http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
There is a Yahoo User Interface uploader, see http://developer.yahoo.com/yui/uploader/
It requires flash on the browser, though.
JQuery UI also has a customized file uploader: http://wiki.jqueryui.com/w/page/12137894/FileUploader
That's going to involve JavaScript.
Simple. Here is how it goes. First you create a dummy button element or an anchor element. Set its z-index to 1. Place the file upload (<input type='file' >) over the aforementioned anchor or button element(dummy) and set opacity filters for the file upload to zero and z-index to be 2. Now it will appear as though ur link or button or image is being clicked. Whereas the file upload layer on top is the one that is being clicked hence you will get your File upload dialog. (Positioning the file upload element can be done with css easily.)
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
This tiny plugin will display the file input field as a bootstrap button (no text field), similar in all browser and will show selected file names (or selection errors) beautifully. Check their live demo.
Additionally you can set various restrictions using simple data-attributes or JS settings. e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.
If you want to get rid of the field next to the “Choose file” button, you’ll pretty much have to code your own file upload field using the JavaScript File API, or (if you need to cater for older browsers that don’t support it) a browser plug-in like Flash.
Web browsers generally decide how they display HTML form controls. This is actually quite good, as it means the fields look the same on different websites, which means users can be confident that they know what the controls do.
I would like to set the default of a drop-down menu of a webpage by passing the default value in the url.
Id like to put a link on a another webpage to this site where the: "I would like my contribution to go to:" option is set to Pakistan: moonsoon floods e.g. by doing something like:
http://donate.ifrc.org/?desc=Pakistan: monsoon floods
but this doesnt seem to work. Any ideas i want to put up this link to get as many people to donate as possible. Thanks.
~f
Unless the site you are linking to has specifically included code on their pages to support it, you are not going to be able to control how their site performs by changing the URL.
If you were trying to do this on your own site, you could easily do it by referencing the querystring parameters in whatever server-side language you built the site with, or on the client-side via Javascript. But in either case, the site itself controls how it responds to a URL, not the other way around.