Heatermeter Home page tags


 
D

Dave R

TVWBB Fan
Didn't want to hijack Darren C's Home page modification post since it was for showing the modifications you did.

I was wondering if there is a listing of the various tags that can be modified for the homepage look. Looking at various posts, I see tags like:

#backoverlay { background: transparent; }
#content { background: transparent; }
#probelist { background: rgba(125,100,55,.6)}
#fancontainer { background: transparent; }

or

#content { background: #000; border: 1px solid #467; }
#backimage { background: #000 url(http://www.angelys-resorts.com/wp-content/uploads/2013/02/header011-1600x250.jpg); }
#backoverlay { background: inherit; }
#probelist { background: transparent; }
.pname { color: #fff; font-size: 24pt; line-height: 16pt; display: inline-block; text-shadow:2px 2px 4px #000000 ; }
#fanl { color: #fff; }
#fanc { #fe4 ; opacity: 0.6; }
#fancontainer { background: transparent; }
#navcontainer ul { padding: 0; }
#navcontainer li { width: 150px; padding-right: 15px; }
#navcontainer li a { display: inline-block; width: 125px; }

Just wondering how everyone knew to use #probelist to modify the box the probes are listed in or .pname to change the way the probe names are presented.

Dave
 
You need to look at the source for the page and just see what's there. You also probably need a CSS tutorial. The # is a selector for "id=". Everywhere you see "id=", you can address it in CSS with #. Classes are "." (like .pname in your example). Just look for "class=" in the code. Or, you can use just the HTML tag itself or even a combination. Again, in your example, "#navcontainer li" specifies all "li" tags that fall within the #navcontainer, as opposed to all li tags everywhere. Think of HTML code as a tree with branches.

I find firebug in Firefox to be indispensable for identifying the objects on the page that I want to experiment with. You can change to heart's desire in your browser. When you get something you like, you can update your CSS.


Dave R said:
Didn't want to hijack Darren C's Home page modification post since it was for showing the modifications you did.

I was wondering if there is a listing of the various tags that can be modified for the homepage look. Looking at various posts, I see tags like:

#backoverlay { background: transparent; }
#content { background: transparent; }
#probelist { background: rgba(125,100,55,.6)}
#fancontainer { background: transparent; }

or

#content { background: #000; border: 1px solid #467; }
#backimage { background: #000 url(http://www.angelys-resorts.com/wp-content/uploads/2013/02/header011-1600x250.jpg); }
#backoverlay { background: inherit; }
#probelist { background: transparent; }
.pname { color: #fff; font-size: 24pt; line-height: 16pt; display: inline-block; text-shadow:2px 2px 4px #000000 ; }
#fanl { color: #fff; }
#fanc { #fe4 ; opacity: 0.6; }
#fancontainer { background: transparent; }
#navcontainer ul { padding: 0; }
#navcontainer li { width: 150px; padding-right: 15px; }
#navcontainer li a { display: inline-block; width: 125px; }

Just wondering how everyone knew to use #probelist to modify the box the probes are listed in or .pname to change the way the probe names are presented.

Dave
Click to expand...
 
I did some more digging and paying attention to other posts a little better, seems like this file: /usr/lib/lua/luci/view/linkmeter/index.htm is the main layout for the webui and it has the tags listed in there towards the bottom, after all of the fuctions.

Dave
 
I think that is the path to the file for the main view. But, you don't really need access to the HM filesystem for most modifications. That was the whole point of Bryan's new feature for customizing your HM CSS. The only changes that I can think of that you might need direct access to the HM filesystem to make would be to change the fire.png image, modify the html or modify the javascript.

Here's a link to Bryan's source code. You should be able to get all of the tag information there.
 
Darren,
That is what I was looking for. I don't plan on changing the file for the main view but did want to change the view. Just didn't know what each item was called. Looking in that file, it lists the names (tags) given to each item on the view so I know how to make references to them.

Dave
 
You don't really even need that code. You need to use Firebug. With Firebug, you can see the tags. Not only that, but you can modify the page in Firebug and get instant feedback without making permanent changes. You can also point to things on the page and Firebug will find the code that created that element.

IMHO, it is indispensable for web development. It is the tool for the job.
 
You must log in or register to reply here.

 

Back
Top