I want to create a news aggregator with an interface similar to GoogleNews. Very little experience with HTML/CSS, couldn't do it just with inspect. Is there any way to include (or download) the stylesheet, so I can create an interface similar to Google. I found something like:
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
But still couldn't get it, even the navigation bar with the search input text in it. I have done all the work on the background, but stucked in the front end, do not know where is the best start point.
Google News has a great deal of its CSS inlined, so you won't find an easy plug-and-play stylesheet like you're describing. I suggest you create a simple three-column layout using Bootstrap or Foundation. You'd save time by not having to remove and/or make sense of all of Google's proprietary markup and CSS and you'd have a better grasp of what's going on.
Related
I'm currently developing a website using Joomla. I have problem to make my website responsive. My current solution is adding CSS codes into the HTML, but it does not work. Can someone give me a solution on how make my website responsive without using extension or changing the template. Thank You.
If the template you're using isn't already responsive you're really making things hard for yourself by wanting to stick with it.
The way css is loaded varies according to template, so you need to check yours to see what mechanism(s) it gives you for including your own css. Again, if there isn't one, you're probably best to get a new one, it will make life so much easier.
If they've implemented a mechanism for you to use, that will probably define the file you can use.
There may be an option in the template admin panel to enter css.
Without knowing which template you're using and how it does that, it's pretty hard to give a very useful answer.
This might seem a bit unorthodox, but I am trying to use Bootstrap with the website I'm working on now, but don't have access to the head section of the site itself.
Ideally what I'd like to do is to use the Bootstrap CDN, which is available from getbootstrap.
The other option would be to take the CSS I might need from the Bootstrap downloaded CSS files and do the code inline, but this, obviously, would be a bit more work.
So, my question would be -
1) Is it possible to link to the Bootstrap CDN outside of the head?
2) Are there any alternatives I'm not thinking of?
3) Is copying and pasting inline the only way to do it?
We'd need the head developer, with full access, to implement it in the head itself, who has a lot on their plate and this would likely feature quite low on the list of things to do, so if I could do something myself then it'd be great.
You can include external CSS like Bootstrap in the body section however it is considered as a bad practice. What actually happens when you include the external CSS in your body section is that your content gets posted before getting styled and then gets styled later. In short, what im trying to say is that it works but it has a few drawbacks.
I can not think of any other alternatives.
how are you I know too late to answer but I just wanted to tell my opinion.
I think no, there is no solution to add CSS link stylesheet outside the head section.
with my all love and respect, Ahmad Itani
I'm working on a simple one-page calculator, heavy with JavaScript and form elements. Here is a static snapshot of the page as an example: http://pastehtml.com/view/1ce4ppo.html
Obviously it's very plain and I haven't put much emphasis on the layout of it yet. But this prototype is about to be shown to the client in a few hours. There is the understanding that it is a mockup prototype, so the client is not expecting anything design-wise, but I wouldn't mind if it looked a bit nicer.
What are some quick and easy tweaks I can make so that the page looks a little better? I'm terrible with colors and design but I know CSS quite well (like an English major who knows correct spelling and grammar but is terrible at writing a story).
Also, I am using jQuery in the form, so anything involving jQuery is great.
I would suggest the Blueprint CSS template You can use just the form CSS, seen here. All you have to do is add some classes to the HTML and you've got some decent forms.
give this a quick read: http://www.emblematiq.com/lab/niceforms/
i dont know if the javascript load is worth it for what you are looking for
I really like narrative style forms, where form elements are integrated in sentences which guide the user through the form-filling. Might not be for everybody(every form) but I think it's a really nice way of making your forms user friendly and stand out from the rest. Here you can find an example: http://www.lukew.com/ff/entry.asp?1007
When it comes to styling select, radio or checkbox inputs I prefer http://pixelmatrixdesign.com/uniform/.
I'd use one of the free template sites out there. I use them all the time, especially for a mock-up since I'm also not a design person. And in a lot of cases the customer enjoys the look or doesn't care. Just check what the requirements are for using the template, if there are any.
I know that is a very embracing question, but I have just started with Ruby on Rails, and still have a long way with CSS and HTML.
There are lots of books about CSS and HTML patterns, but I would like to know what is really applied to actual webpages.
For example, what's the best way of doing a simple webpage with a lateral menu, a logo on the top, and some text below?
Ok, it seems stupid, but there's lot of ways of doing that, or not ?
So, how can I learn this patterns and what are the real patterns ?
Would appreciate suggestions of books, articles, etc.
you can find some good css templates here:
http://www.csszengarden.com/
Actually in html and css there are not patterns in the oo sense.
I find this tutorial very useful:
Design and Code your first website
The nettuts website has a lot af very good free tutorials.
A very good book to begin is:
Head First HTML with CSS and XHTML
It varies from developer to developer. So I'll just tell you what I'm doing!
I'm actually following a very common pattern - separate ANY layout from the contents!
Into the HTML goes...
Text
<div/> containers with IDs to be layouted
And in the CSS goes...
Layout for the ID'd and class'ed <div/> layout containers
Colors, Background images
Fonts
It allows to rapidly change the whole page design without even touching the HTML! And it decreases both your server's traffic and the load time on the client pages, because the CSS file can be cached, since it does not change as much as the HTML does!
The CSS Zengarden nate posted is a very nice example of this pattern. The same unmodified HTML with dozens of CSS files with totally different looks!
This pattern also allows the same unmodified HTML to be displayed with automatically selected CSS files on huge displays, on small netbooks and on mobile devices. Can't be any better if you ask me!
You might want to check out some CSS libraries.
I don't personally like using them because I have ways that I like to do things and sometimes they aren't flexible enough for what I want to do. But since you're just starting out they might help you get something that looks good up really fast without having to worry about float drop bugs or margin collapsing or any other CSS quirks that are easy to hit but hard to recognize if you haven't seen them before.
An example would be the Yahoo User Interface (YUI) Grids CSS that will help you set up many different kinds of grid layouts. To find more, I would search for "css framework" or "css library".
Another YUI resource I think would be really useful for you would be their design pattern library, which documents different ways to display common interface items and gives you resources to go implement them. This can help make your interface look familiar to users and can keep you from feeling like you have to redesign a drop-down box or something.
The rule of thumb should be to do all design in CSS and HTML is just HTML without calls to design. That way, like referenced above, you can change design rapidly.
A good reference for how this works is the Zengarden CSS site at: http://www.csszengarden.com/
This is a site I used often as I learned the ins and outs of CSS design.
The Separation of Layout and Content is the domain of CSS and HTML - so far well understood. Now about separating...
I'm looking for hints and Best Practices to get started with the task of providing a "skin" or "theme" for a content management system.
Background:
We are starting to embrace a Portal Server/Content Management System and are starting to change the look and feel to match our needs.
Our designer has so far mainly worked with full control over HTML and CSS, tweaking either one in order to get pixelperfect layout. With adoption of the cms there's a lot precreated HTML (very semantic, almost no tables :) that needs to be skinned with CSS and Images. Though it is possible to change the HTML fragments, I'd prefer to do so only as a last resort.
As this provides the challenge of "how to get started" my question is about any tipps how to proceed or articles that can help managing or organizing this task - e.g. best practices in designing, how to slice this task or what tool to use.
It seems bad practice to just save a dynamically generated page to disk and make changes locally. This would be somewhat ok for the CSS files but changes to HTML elements must be retrofitted to the fragments that they are generated from. I'd like to keep this out of the designer's realm if possible. Also, the thought of Dreamweaver (or any similar tool) making implicit tweaks to the HTML structure is frightening for me.
For the curious: The mentioned CMS/Portalserver is Liferay, but the question is really language- and tool-agnostic.
Edit: FireBug (as Josh suggested) is awesome for trying on-the-fly changes to css. Is there more - either in the area of tools or in-process and self-organization?
If you're looking for practical examples of separating style and content, then I'd suggestion the CSS Zen Garden. Trawling through the HTML and CSS is inspirational and enlightening and should help with what you're trying to do.
My #1 tip would be be to make everything as semantic as possible and use lots of classes and ids to hook your styles onto.
Usually, Whenever I am in a situation Like this, I bring up the page in FireFox, inspect the different elements using FireBug and see exactly what css is applied to them. THen I'l just modify the existing css until I get what I like. You can even play around in firebug and modify the CSS without "saving" those changes.
Have look at CSS Tidy, we normally use this to clean up the CSS and reorganise for development and production. However, I personally prefer writing HTML/CSS by hand before using this. It is just a matter of individual preference I guess.