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.
Related
I’m building a site as part of my research using Word Press. I’m trying to display samples on the homepage in a neat way, something similar to this one http://www.maitrechoux.com/menu/index.html?categ_id=all .
I have removed all of the home function using remove_action. How can I add the table and then how can I add the pictures inside each cell? Is it only matter of CSS or do I need to add HTML code for this? I recently joined word press community and this is the only thing remained to complete my website. Really appreciate any help!
NO, don't use tables. I think what you actually want is just to display something that looks like table.
You need to code both html and css for that.
You can use any of popular css frameworks to help you out, or you can code it yourself using, flex, floats, or grid...
When you are done then with wp functions you need to render that data in your wp theme.
Your question is to broad and big to be answered via code snippets or examples, sorry.
I recently wanted to change the template of my WordPress website and use React tables.
But this would cause my site to drop in Google rankings, and in terms of SEO, this would not be a good thing.
That's why I decided to use my template pre-built tables and change the files to my liking in the settings section by editing css files.
I googled a lot for design something as the picture in HTML, but couldn't find anything hint. I wonder is it possible to design a web application in what picture show?
It can be easily implemented just using HTML and CSS but if you are pretty much comfortable with these two languages then I suggest you to learn Bootstrap.Using Bootstrap you can make even better than this.It has predefined classes for buttons,icons,header.tables,and lot more.Trust me,You'll love it.Hope this helps!!!!
That doesn't look very advanced to me.
The laptop is an image
Its container uses some shadows and gradients and
The icons are also images.
Regarding the literal question: Since it's already made, it's possible.
All you need is: HTML, CSS, JavaScript and the desire to code.
Could someone suggest me any good beginners guide on how to create web pages from scratch (slice a psd) using divs. I have html and css knowledge but have never created any page from scratch in any way div/table/html5
Start by mimicking a simple page. This is called a "cleanroom" exercise, and is great for improving your HTML and CSS skills and actually making it possible to transfer design and layout ideas from your mind into code.
Here's how you do it:
Pick a page whose design you like and looks simple enough. For example, the logged out page at flickr.com.
Take a screenshot of it; do not look at the HTML/CSS code at all
Create a replica of it using your own HTML and CSS from scratch
You may use a color picker to find what colors they use
Try mimicking the fonts and distances manually, without looking at their rules; this will help you get a better understanding of page layout rules and typography rules.
Make sure your final HTML validates, preferably as XHTML 1.0 Strict (that's stricter than HTML5 and compatible with HTML5)
Also validate your CSS
Using the browser of your choice (e.g. Firefox 4 which is good at rendering things according to standards), check if your result is the same pixel-by-pixel.
Resize your website and see if it behaves the same as the original.
Ask a more experienced developer whether your HTML code is semantically correct. This will help you determine whether you've used the correct tags for the correct meaning.
This assignment will take you a long time the first time you do it, but if you're an experienced developer, it won't usually take more than a couple of minutes or up to an hour per page. It may become frustrating at times, but it's a great way to improve your skills. While doing it, make sure you look at references such as http://www.htmldog.com/ for the HTML/CSS language syntax.
Hello every one i had created a website using dreamweaver in windows7 which worked good in my system.I opened the same html site in another system with operating system windows xp and even in windows 7, but all the alignments of images ,textfields ,buttons and header image,content etc everything has been changed.what might be the problem.Can any one help me in solving this problem.Your answer will be most precious thing to me.Thanks to every one whose going to spend time on reading this question.
Without knowing more details it's hard to properly answer your question. Going to take a shot in the dark about a common issue.
If you did it in Dreamweaver you probably used its interface to drag and drop div elements around to place them in exactly the right positions. The problem with this method is that DW will use positioning relative to your screen size and it might not show up too well on other resolutions.
The solution to this is to make sure you code your containers correctly and not have a look at DW's CSS to fix it.
Without the HTML of your page (post it in pastebin and link it here), can't give a better answer.
Make sure you VALIDATE your code. In my experience using dreaweaver, the doctype declaration and the order of the tags can affect image positioning.
That was because you used different browser. In using Dreamweaver, try to not leave default values. For better debug you should code it with HTML and CSS. Those are not programming languages because they don't need exactly programming knownledge.
A really good HTML lessons at w3c.
A really good CSS lessons at w3c.
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.