I see it in the jsp pages and not sure what it means?
<td class="bodytext2">
it causes text to display blue, and I don't want it
There's a CSS entry somewhere for bodytext2 which determines the style of table cell. This entry will look like ".bodytext2" or some variant with selectors in front of it, and it can be on the page, linked on the page, or linked in anything linked on the page. There's a good chance that the CSS class was applied programmatically in a "dumb" sort of way. Go learn CSS and a server-side language and all will become clear.
In the absence of any context, it appears to be a custom class assigned to the <td> element. You'll have to look in the CSS to see what it does.
Search your project for .css files. More than likely you are going to find a reference to one towards the top of your .jsp file. Inside the .css file you will find a reference to .bodytext2. This is where styles (like the blue font color) you mentioned are defined.
Related
I am working on a Wordpress website in which I need to use the musical "flat" symbol. To figure out what might be a good way to handle this, I checked out what is used on Wikipedia, in the corresponding article (https://en.wikipedia.org/wiki/Flat_(music)).
I know how to find the HTML entity code and use that, and I know I can just copy the symbol from somewhere else and just paste it directly into my post. But when doing that, there is extra padding around the symbol, so it displays incorrectly, like this: D ♭ . (It's actually not doing it here on SO, so I had to add spaces on each side to simulate it.) It looks like the problem is handled on Wikipedia by the following code, which appears everywhere the flat symbol is used:
<span class="music-symbol" style="font-family: Arial Unicode MS, Lucida Sans Unicode;">♭</span>
So I used the same code and I created a "music-symbol" class in the CSS file, in which I set padding to 0. I couldn't find the corresponding class on Wikipedia, but I guessed that that's what it contained. I honestly don't know why this works (I'm a noob) but it does seem to work, assuming I specify the font using the style tag as shown. When I say "it works", I mean that it makes the flat symbol appear right next to the note name, as it should, without extra space, like this: D♭.
However, when I view the same site on my Android, the spacing is still there. Can anyone explain why, and how I should address this?
Also, is there a better or more straightforward way of handling special symbols like the flat? I don't get why I was able to paste it in directly here on SO and have the spacing be correct without having to use the extra class reference and style tag.
As far as I can see within the styles on that particular site there is no additional styling for the music-symbol class. From what I can tell the additional white space is inherit to the element and font(s) being used. Padding will not be what you are looking to alter, you would be wanting to adjust the margin of the span element where the symbol is placed.
See class definition below for styling a span with the music-symbol class
span.music-symbol {
margin-left: -2px;
}
I have a question about how content-hiding feature is implemented on thefreedictionary.com site.
I don't understand how does it work.
If you visit the following URL with AdBlock enabled,
http://encyclopedia.thefreedictionary.com/stack+overflow
the main content will be hidden.
Even if JavaScript is disabled (I'm using "NoScript" FireFox add-on), the main content will still be hidden.
Let's look at the main content div:
<div id="content" class="yt">
The path to this div is the following (the image is clickable):
Please note that the class name (yt in my case) is different on every page refresh, so your class name may contain another 2 letters.
By looking at "Rules" and "Computed" tabs in Firefox Developer Tools we can see that .yt class has its display attribute set to none.
It is easy to check that it is this checkbox that controls the visibility of main content.
My question is: Where does this css line come from?
It looks like a css data URI, but I can't find data URIs in html file.
The html file refers to "all.css" which also does not contain setting .yt display to none.
JavaScript is disabled, so display property could not be changed dynamically by a script.
I'm interesting, what trick is being used here.
Could someone explain please?
I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.
I created a template with editable areas and it just works like a charm,
the thin is that i need to define few different links so they can be changed for each campaign,
I tried:
A link
A link
A link
A link
But then in the preview mode I have no option to edit this link,
Any idea how to set this custom url values for each campaign?
Thanks for clarifying in the comments.
I don't think you're looking to use merge tags, since you're just trying to change links in the template, not necessarily insert subscriber-specific info. So, the focus should just be making the links in the template editable by the sender, in the MailChimp editor. This way, the sender can create a campaign, select the template and edit the regions/links that you want to be editable.
To make a region editable, use the MailChimp template language. You can't make "a" tags themselves editable, but you can make a surrounding div or td editable.
<td mc:edit="links">
A link
A link
</td>
You may also find the information in this answer helpful.
MailChimp Editable buttons inline styling is overridden
The tactic above will work well however because the editable region is on the <td> it means the user could delete links by accident.
If you want them to be able to edit links, but not mess up your layout you could put the editable region on the link itself as below.
<td>
A link
A link
</td>
The reason I would do it this way is to retain the aesthetics i.e. if creating a menu you would not want people to add text or an image by accident, thus making the link the editable region makes only the link part editable.
You need to use link1 link2 etc so they are all unique.
You may also find the information in this answer helpful.
MailChimp Editable buttons inline styling is overridden
I think the ideal is to use CSS purely for the layout and presentation, and HTML for the content. But let's say, the company wants to change a "Related articles" box from the bottom of the page to the top of the page. In such case, won't using CSS alone be not an ideal solution, but is better to alter the HTML as well? So as things are right now, HTML still takes a role in the page layout and presentation? Thanks.
Things still appear in the same order as they are in the html - it's not as restrictive as that as we can use absolute and relative positions, but those are undesirable - it's better to use to dom flow to handle placement, and that means yes, you should move the node in the html.
As Jason said, CSS is for styling the content, the content itself and its order is defined by the data (html), as order is necessary for the context of information, so it lies firmly in the 'data' part of what we do rather than the 'display'
EDIT:
I should say this: If you want your data to be totally independent of the display, you should consider defining your pages as xml only and using xsl to define the layout. xsl combines with css to completely abstract the display away from the data.
It does on two levels:
Firstly, the order of elements is still important. CSS floats are used a lot for layout but they also require elements to be in a certain order to get things in the right place. For example, lets say you have two buttons:
<input type="button" value="Click Me">
<input type="button" value="No, Click Me!">
These are next to each other. Lets say someone asks you to move the second button to the far right. This is how you do it:
<input type="button" value="No, Click Me!" style="float: right">
<input type="button" value="Click Me">
If you don't do this, the second (floated) button will appear below the other.
The second way HTML is still important is that there are still things that you need HTML tables for that can't be done in pure CSS at all, in a browser-compatible way (meaning IE6 support generally) or easily. This isn't something the pure CSS zealots like to hear but, like it or not, in the real world it's still true.
This is especially true with HTML emails. If you thought browser support for CSS was bad, mail program support is so much worse. Generally speaking you avoid CSS altogether with HTML emails and just pretend like its still 1999.
HTML still defines the hierarchy for elements.
HTML divides your page in logical sections. CSS then applies a certain look/feel/style to those sections.
If you want to change your page layout to include a section inside another one, you have no choice but to modify your HTML because HTML has a role on page layout.
You can actually move blocks around using nothing but CSS. The compromise always boils down to how good your CSS skills are and how much compatibility with older browsers you're after or care about. There are limits to what CSS can do, so yes, HTML definitely still has a role to play.
it is possible to change the "source order" of divs or use css to change positions. But if its more practical to just change the html, then there's no other way round it. At the end of the day, if its more important content then the source should reflect it for semantic reasons.