I'm trying to create a Tab Panel that auto adjusts to fit the width of each of the tab content boxes, & also has a Max-Width of 900px, & also stays auto centered on the screen. I can get them to work individually, but not all 3 together.
You can see at this webpage that I've got the Max-Width: 900px working & the Auto-Centering working, but not Fluid-Width Auto-Adjust (it always stays at 900px instead of reducing its width for the slimmer tab content boxes, see the tabs "WATCH THE FILM" & "SCREENINGS" specifically): http://www.shellshockeddoc.com/
Here is my CSS for the tab content group so far:
#TabbedPanels2 .TabbedPanelsContentGroup {
max-width:900px;
margin-left:auto;
margin-right:auto;
margin-top:105px;
}
& here is the HTML:
<div id="TabbedPanels2">
<h2 align="center">TAB HEADLINE 1</h2>
<p align="center">Tab Content 1. This tab contains content about 850px wide.</p>
<h2 align="center" >TAB HEADLINE 2</h2>
<p align="center">Tab Content 2. This tab contains content about 350px wide.</p>
etc
</div>
Thanks a lot in advance! I'm pretty new to CSS & appreciate all the help I can get.
Related
So I have been attempting different variations of trying to use #dc6820 in my code to change only one link source for a layout I'm helping someone with. Usually, I don't have too much trouble, but no matter what I've tried, it just remains the same (or I muck up the coding and have to redo it)
This is the section I'm attempting to change:
< div id="info" >
< br >posted < a href="{Permalink}">{TimeAgo}< /a> {block:RebloggedFrom}
**via < a href=" {ReblogParentURL}">{ReblogParentName}< /a>{/block:RebloggedFrom}
{block:ContentSource}(< a href="{SourceURL}">© < a href="{SourceURL}">{SourceLink}<
/a>){/block:ContentSource} {block:RebloggedFrom} < a href="{ReblogParentURL}"
target="_#nk">< /a>{/block:RebloggedFrom}**
with < a href="{Permalink}">{NoteCountWithLabel}< /a>
{block:HasTags}< div id="tags">♡{block:Tags} #< a href="{TagURL}">{Tag}< /a>
{/block:Tags}< /div>{/block:HasTags}</div></div>
{/block:Posts}
{block:PostNotes}< div id="notes">{PostNotes}</div>{/block:PostNotes}
{/block:Posts}</div></div></div>
< /div>
I'm attempting to change the section between asterisks (via --> /block:RebloggedFrom}
Edit// I've attempted the style change referenced below to, unfortunately, no results :(
Here's a link to the pastebin with the section (hopefully) without the errors pastebin.com/qNAbZAhQ –
First, let's clean-up that HTML and make sure our tags are closed.
HTML
<div id="info">
{block:Date}
posted <a class="time" href="{Permalink}">{TimeAgo}</a>
{/block:Date}
{block:RebloggedFrom}
via <a class="reblog" href="{ReblogParentURL}">{ReblogParentName}</a>
{/block:RebloggedFrom}
{block:ContentSource}
(<a class="source" href="{SourceURL}">© {SourceTitle}</a>)
{/block:ContentSource}
{block:NoteCount}
with <a class="notes" href="{Permalink}">{NoteCountWithLabel}</a>
{/block:NoteCount}
{block:HasTags}
<div id="tags">
♡
{block:Tags}
#<a class="tag" href="{TagURL}">{Tag}</a>
{/block:Tags}
</div>
{/block:HasTags}
</div>
As you can see, in addition to closing tags (and removing unnecessary elements) and wrapping everything in its correct block, I added different class attributes to each type of link so that you can go into the stylesheet in the head and add your colors. For example...
CSS
<style type="text/css">
a.reblog {
color: #DC6820;
}
</style>
or
<style type="text/css">
.reblog {
color: #DC6820;
}
</style>
or even
<style type="text/css">
.reblog:link {
color: #DC6820;
}
</style>
That latter would allow you to use CSS state selectors to change the color of the link depending on the state of the link, e.g. active, hover, visited.
You can add a style attribute to your a tag as such
< a href=" {ReblogParentURL}" style="color: #dc6820;">
Of course you need to add this to all your a tags that you want to change.
I have -
<p>some text as 'intro'</p>
<h1>Big Text</h1>
<p>some text as 'outro'</p>
I have this set out on a background image, I have styled margins and fitted the text inside properly, but I want to bunch up ALL text so there is little gap - line-height would ruin it and I have tried seperate div tags but no luck - what is the best chosen css method for this?
Thanks!
If you require the use of those elements you could use negative margins:
<p>some text as 'intro'</p>
<h1 style="margin: -15px 0 -15px">Big Text</h1>
<p>some text as 'outro'</p>
A better way is probably to separate the different lines by line breaks and to style the 'header' line, like so:
<p>some text as 'intro'<br />
<span style="font-size: 200%; font-weight: bold;">Big Text</span><br />
some text as 'outro'</p>
Can anyone please tell me how to dynamically change page layout in Liferay.
Let's consider we have page with Layout 2 column(50/50) and both these columns have portlets.
If a user clicks on any of the portlets, I Would like to change the page layout to 2 column(70/30).
I have never tried it but did you try checking LayoutLocalServiceUtil.updateLayout() ?
That should help you. If you are creating a new page use LayoutLocalServiceUtil.addLayout() otherwise use updateLayout().
Get layout and then update it.
layout = LayoutLocalServiceUtil.getFriendlyURLLayout(groupId, false, friendlyURL);
Adding to-
As provided-
layoutId = LayoutLocalServiceUtil.getFriendlyURLLayout(groupId, false, friendlyURL);
pass the new page's friendlyURL,
if it is a public page then false else true for private,
and make sure that you have applied some layout to the new page(for e.g- 70/30)
Use this layoutId in -
" windowState="<%= WindowState.NORMAL.toString()%>">
provide portletId to the portletname field.
Below is a sample html portion from a layout template...
<div class="portlet-layout">
<div class="aui-w70 portlet-column portlet-column-first" id="column-2">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
</div>
<div class="aui-w30 portlet-column portlet-column-last" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
</div>
</div>
if you check it minutely, there are classes describing the width of the div, In my example aui-w70 is for width 70% and aui-w30 is for 30%. I am sure you will also get similar things in your layout too.
If you can change the class names according to your need in desired events, you are good to go...
Give it a try....
I searched all around stackoverflow but I couldn't find an answer for it. Here is the problem:
I have two divs, one on top of the other. I want to have the top div to adapt the height depending on the height of the below div.
<div id="parent" style="height:300px">
<div id="div1" style="height:auto"></div>
<div id="div2" style="height:45px"></div>
</div>
This because I intend to show/hide the bottom div and the top div must resize to fill the parent div.
I forgot to mention that the first div (the one that needs to adapt) has long content with overflow:scroll
Can you help me please?
Thanks
For this you can display:table property. Write like this:
#parent{
display:table;
height:300px;
width:100%;
}
#parent > div{
display:table-row;
}
#div1{
background:red;
}
#div2{
background:green;
height:45px;
}
Check this http://jsfiddle.net/7NuFr/
Guys i have a serious problem, like in the image below , the styles menu is not showing for html rich editor in sharepoint 2010, i included the *.css file and the PrefixStyleSheet
any help ? :(
Did yor read http://msdn.microsoft.com/en-us/library/ms551040.aspx and especially the first section which specifies how to set the PrefixStyleSheet-property of the RTE-control? If you then add css-classes with the specified stylesheet-prefix in your css, they should show up in the Styles or Markup Styles section depending on the context of the editing.
Have you done the above steps?
If you set PrefixStyleSheet to, for example "Test", your css should look like this to have a H1 show up in the Markup Styles section:
H1.TestElement-H1
{
-ms-name: "Heading 1";
}
and markup:
<PublishingWebControls:RichHtmlField id="Content" PrefixStyleSheet="Test" FieldName="PublishingPageContent" runat="server" />
Get a copy of corev4.css and do a search for ms-rte. Keep searching untill you get to a bit that looks like this:
H1.ms-rteElement-H1 {
-ms-name: "Heading 1"
}
.ms-rteElement-H1 {
FONT-SIZE: 2em; FONT-WEIGHT: normal
}
Use the supplied values to build your own styles and Markups.
Assuming your prefix is PrefixStyleSheet="myPrefex"
Markup Styles seem to require 2 css entries each. So if you wanted a markup style called "HEADING ONE!!!FTW" that was 2em bold you would have:
H1.myPrefexElement-H1 {
-ms-name: "HEADING ONE!!!FTW";
}
.myPrefexElement-H1 {
FONT-SIZE: 2em; FONT-WEIGHT: bold;
}
Markup styles are applied to existing HTML tags, so it appears the logic behind rolling your own is to overload the HTML tag with your own class name and give it a label, then flesh out your class with the actual css goodness.
Items in the STYLES drop down seem to only require a single line:
.myPrefexStyle-Bold {
-ms-name: "Bold Bits";
font-weight:bold;
}
But besure to include the -ms-name attribute as this determines the text that appears in the drop down (If you dont have this attribute you end up with blanks)
PS: Dont forget to include your own css stylesheet in the master or layout or page. I ended up putting in my master page with: <SharePoint:CssRegistration ID="CssRegistration2" Name="<% $SPUrl:~SiteCollection/Style Library/MyCustomMarkup.css %>" After="corev4.css" runat="server"/>
[offtopic]Ive only just started with sharepoint, but boy is it a dogs breakfast behind the scenes! The horror, the horror![/offtopic]
To use a custom style prefix you must set both PrefixStyleSheet and Stylesheet property:
<PublishingWebControls:RichHtmlField AllowFontsMenu="True" FieldName="Page Content" runat="server" PrefixStyleSheet="custom-rte" Stylesheet="<% $SPUrl:~sitecollection/Style Library/custom_rte.css %>"/>
Remember that doing this you will overwrite all dropdowns, colors and other options in RTE, so if you want to only change the Styles dropdown you still must to copy all the default rules.