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
Related
I have made a button using which must include a picture and text. Here is an example of what I have at the moment
https://jsfiddle.net/9c9dnot9/
<button id="CLPButton" class="DeptButton">
<span>
<table style="width:120%">
<tr>
<th><img src="http://i.imgur.com/vjrbizL.png"></th>
<th>Clinical Lab <br> Platforms</th>
</tr>
</table>
</span>
</button>
The reason I have it set up as a table is to properly adjust the alignment and formatting of the image and text within the button.
I can wrap the image and the text in tags to href to the page I want to link to.... but then you have to click the picture or the text. I want the entire button to be clickable and redirect to the URL.
I have tried every tip and trick I could find on numerous forums but can't seem to get it to work. Things either outright fail or completely screw up the formatting.
The purpose of this is to have a series of buttons for a SharePoint site which link to certain corporate departments.
I am somewhat new at coding in general so the more explanation the better! Thank you
Buttons are not intended to be links. The purpose of a button is to interact with HTML forms (e.g. submitting form data).
If you want to have something that looks like a button and behaves like a link, then I would recommend creating a link and styling it with CSS to look like a button.
In your fiddle, you can actually just change your <button> markup to <a> and it should all work fine.
Updated Fiddle
You can wrap the entire button in an a tag and add the display: block property in order to set its height depending on its content. Then, instead of setting the width on the button, set it on the link and add width: 100% to the button instead, so your link won't take the full width of its container and your button will be more maintenable because you won't have to set the width of the link and the button if you decide to change !
Here is a working fiddle: https://jsfiddle.net/d5tcamok/2/
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
I want to create a button in my rails web application. It Should contain an image & text.
Also that button should call a link.
I am using button_to tag to create button for a link.The link must be processed as html request not js call.My problem is how to add image in that button?
Please help.Thank you.
Try this:
<%= button_to("TEXT",question_path,:style=>"background-image: url('/images/image.extension');") %>
And yes Yuri's right, "Button always should do an action, link should always redirect somewhere (except pseudo-links, which could do some average — i.e. open hidden blocks, etc.)."
Here is a working example using HTML and CSS in JS Fiddle
http://jsfiddle.net/G3x8p/
Ive used almost all the attributes you need to get it working how you want, just change them to suit your needs.
Keeping it in an external CSS keeps it neat and tidy, and removes the need for messy inline CSS code.
On the one hand you can style an A tag to looks like button with CSS or use BUTTON tag, but, on the other hand, remember, you should avoid to use buttons with the link behavior. Button always should do an action, link should always redirect somewhere (except pseudo-links, which could do some average — i.e. open hidden blocks, etc.).
I want to apply 3 tabs for a common way to partition lists.
How can I improve my view and also add the way a tab gets to the foreground like in the link? I could read the html / css from the link to learn how it swtiches between the three categories and looks more like tabs than my effort.
The difficulty for me is styling the tabs named "All", "Private", "Company". Could you help me? My website which uses a http get parameter f=c for company view and f=p for private view which correctly fetches the apprioriate subset but at the moment doesn't change the layout which it should to look more professional.
Update: The above looked terrible so I've styled it and I want also to add dynamics with a tabs URL parameter.
You're very close. Mark the active tab with a css class like <li class="active"> then assign that class a different background color (like white) and no bottom border. Then it will appear to merge in with the content beneath.
use jQueryUI tabs see demo here
easy to use, easy to style, all the functionality you could want :)
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.