I have used Web Content Display Portlet on my page to display some text. I have to apply css and insert some images for those. I have put the html code in the source. HOw do I apply css for it?
Here is the source that will go in my Web Content Display Portlet
<div class="products" style="width:1000px;">
<div class="tvc box">
<img alt="ADVISORY" title="ADVISORY" src="Index_files/ADVISORY.PNG">
<div class="txt">
<p class="hdtxt"><cufon style="width: 78px; height: 16px;" alt="ADVISORY" class="cufon cufon-canvas"><canvas style="width: 85px; height: 16px; top: 1px; left: -1px;" height="16" width="85"></canvas><cufontext>ADVISORY</cufontext></cufon></p>
</div>
Know More </div>
<div class="tvc box">
<img alt="Branch Locator" title="Branch Locator" src="Index_files/branchlocator.jpg">
<div class="txt">
<p class="hdtxt"><cufon style="width: 68px; height: 16px;" alt="BRANCH " class="cufon cufon-canvas"><canvas style="width: 82px; height: 16px; top: 1px; left: -1px;" height="16" width="82"></canvas><cufontext>BRANCH </cufontext></cufon><br><cufon style="width: 73px; height: 16px;" alt="LOCATOR" class="cufon cufon-canvas"><canvas style="width: 80px; height: 16px; top: 1px; left: -1px;" height="16" width="80"></canvas><cufontext>LOCATOR</cufontext></cufon></p>
<p>Use our branch locator to find the branch closest to you!</p>
</div>
Know More </div>
<div class="tvc box">
<img alt="EMI Calculator" title="EMI Calculator" src="Index_files/emicalculator.jpg">
<div class="txt">
<p class="hdtxt"><cufon style="width: 30px; height: 16px;" alt="EMI " class="cufon cufon-canvas"><canvas style="width: 44px; height: 16px; top: 1px; left: -1px;" height="16" width="44"></canvas><cufontext>EMI </cufontext></cufon><br><cufon style="width: 102px; height: 16px;" alt="CALCULATOR" class="cufon cufon-canvas"><canvas style="width: 109px; height: 16px; top: 1px; left: -1px;" height="16" width="109"></canvas><cufontext>CALCULATOR</cufontext></cufon></p>
<p>Knowing your home loan EMI is just a click away!</p>
</div>
Know More </div>
<div class="tvc box">
<img alt="FAQs" title="FAQs" src="Index_files/faqs.jpg">
<div class="txt">
<p class="hdtxt"><cufon style="width: 39px; height: 16px;" alt="FAQs" class="cufon cufon-canvas"><canvas style="width: 48px; height: 16px; top: 1px; left: -1px;" height="16" width="48"></canvas><cufontext>FAQs</cufontext></cufon></p>
<p>Get the answers to frequently asked questions here.</p>
</div>
Know More </div>
</div>
Each div with class "tvc box" has to appear one after another horizontally.
HOw do I apply css for it?
As administrator you can access the look and feel configuration of yout portlet.
Clicking on options icon,and choose Look and Feel.
You can see several tabs:Text styles,Background styles, border styles, advanced styling.
Advanced Styling tab allows you to enter CSS code to customize your portlet.
You can find how to do that in:
http://www.liferay.com/es/documentation/liferay-portal/6.2/user-guide/-/ai/look-and-feel-liferay-portal-6-2-user-guide-04-en
Also you can do a new theme for your site and put there your custom.css (I think is the best option, because you need to put images)
http://www.liferay.com/es/documentation/liferay-portal/6.2/development/-/ai/creating-themes-and-layout-templates-liferay-portal-6-2-dev-guide-09-en
Related
i've integration VisaCheckout with Stripe, in testmode is ok but in live gives me JS's error:
Error Message
Js of VisaCheckout
And the page stay freezing, no clickable.
Edit: Code
<div style="padding-bottom: 30px; position: absolute;">
<img alt="Visa Checkout" class="v-button" role="button" src="https://secure.checkout.visa.com/wallet-services-web/xo/button.png">
<script type="text/javascript" src="https://assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js"></script>
<div class="visa-checkout-more">
<a class="v-learn" data-locale="es_MX" style="text-align: center; width: 100%; display: block; color: #003ea9; font: 14px \'Open Sans Condensed\',sans-serif; margin-left: 65px; cursor: pointer;" aria-label="Aprender sobre Visa Checkout">
Conozca más
</a>
</div>
</div>
I'm having two issues at once. One, with my new layout, it seems that when I zoom in enough, the x-scroll bar doesn't appear anymore (it used to before I went to the flex layout.) If I add "overflow: auto;" to the body style, then it will show up, but only if you scroll down to the very bottom, and that's not what I want.
Also, I tried a style where I could have the hover color go over the image instead of replacing it. (I used the after element.) It was working until I went to the flex layout.
(Also, is there a way to add scrolls to the other flex-item divs? I don't know what conditions will force the "overflow: auto;" to come into effect.)
[code]
<html>
<head>
<title> First Baptist Church of LaSalle </title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://firstbaptistchurchoflasalle.com/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="First Baptist Church of LaSalle" />
<meta property="og:description" content="The website of First Baptist Church of LaSalle" />
<meta property="og:image" content="http://sprbc.org/images/banner1.jpg" />
<link rel="icon" href="./churchImage.png">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<style>
.headerDiv
{
background-color: rgb(90, 7, 31);
width: 1000px;
height: 200px;
color: white;
}
body
{
background-color: beige;
//overflow: auto;
}
ul
{
height: auto;
width: 180px;
//background-color: #122213;
border-style: solid;
border-color: brown;
border-width: 10px;
list-style-type: none;
background-image:url(./greenFelt.jpg);
//border-image-source: url(./wood.jpg);
border-image-width: 10px;
border-image: url(./wood.jpg) 30 stretch;
margin: 0;
//float: left;
}
li
{
font-weight: bold;
font-style: italic;
width: auto;
// background-size: 100%;
text-align: center;
font-family: "Palatino Linotype", Serif;
position: relative;
background-image:url(./Crumpled_Paper_-_White.gif);
background-position:center;
background-repeat:no-repeat;
opacity: 1.0;
font-size: 12px;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 8px;
margin: 10px;
text-align: center;
background-size: 100% 100%;
}
li a
{
text-decoration: none;
color: black;
}
li a:hover:after
{
content:"\A";
//width:97%;
width: 92%;
height:88%;
background:rgba(143, 158, 208, 0.5);
position:absolute;
// top:0;
top: 2.5;
right: 0.0;
left: 2.0;
bottom: 0;
}
li:before
{
content: url(./pin.png);
display: block;
position: absolute;
left: 0px;
top: 0px;
}
li a:hover
{
//background-color: #2233dd;
// opacity: .9;
}
.flex-container {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: auto;
height: auto;
}
.flex-item {
width: auto;
height: auto;
margin: 2px;
}
#middle
{
font-family: "Palatino Linotype";
font-size: 14px;
font-style: italic;
}
#right
{
background-color: grey;
}
#container
{
overflow: auto;
}
</style>
<div style="width: 1000px; height: auto; margin: 0 auto;" id="container">
<div class="headerDiv"> <center><h1> First Baptist Church of LaSalle </h1></center>
</div>
<div style="margin: 0; width: 1000px; border: 1px solid blue; height: auto; background-color: tan;" class="flex-container">
<div class="flex-item w3-card-4">
<ul style="width: auto;">
<li> Home</li><br/>
<li> About Us</li><br/>
<li> Pastoral Staff </li><br/>
<li> Sunday School </li><br/>
<li> Services & Directions</li><br/>
<li> Calendar </li><br/>
<li> Activities </li><br/>
<li> Contact Us </li><br/>
<li> Sermons </li><br/>
<li> Weekly Bulletin </li><br/>
</ul>
</div>
<div class="flex-item" id="middle">
Dear Friends, <br><br/>
<p>Thank you for taking the time to visit our website for First Baptist Church of LaSalle. We invite you to take the time to look at the site and get to know a little bit about us. </p>
<p>First Baptist Church was started in 1839 and has been preaching the Word of God without compromise ever since. The church moved to its current location in 1976. </p>
<p>As pastor of the church, I have had the privilege of working with many wonderful people here at the church. God has blessed us with a great staff and many wonderful people in the congregation.</p>
<p>It is exciting to be here and to see what God is doing now and is going to do in the future. First Baptist Church is a church that cares about people and a place you can make home.</p>
<p>I would encourage you to come and see for yourself what God is doing here. My family and our church would love to see you.</p>
In Christ, <br></br>
Wesley Waddle, Pastor
</div>
<div class="flex-item w3-card-4" id="right">
<U>Contact Information </U><br></br>
<B> PHONE: </B> 815.223.1333 <br></br>
<B> FAX: </B> 815.223.1334 <br></br>
<br></br>
<B>ADDRESS: </B> 200 - 24th Street <br></br>
P. O. Box 1043 <br></br>
LaSalle, IL 61301 <br></br>
<br></br>
</div>
</div>
<footer style="background-color: gold; width: 1000px; height: 200px; margin: 0;">
<center> <div style="font-weight: bold;"> © 2017 - First Baptist Church of LaSalle </div> </center>
<center><div class="flex-container">
<div class="fb-like flex-item" data-href="https://www.facebook.com/First-Baptist-Church-of-LaSalle-106794612807864/" data-width="80" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus flex-item" data-action="share" data-width="150" data-href="http://firstbaptistchurchoflasalle.com/"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<div style="color: black;" class="flex-item">Tweet <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</div> </center>
</footer>
</div>
</body>
</html>
[/code]
For the hover problem, it's not lining up to fully fit the image. It's a big too tall on the sides at the top. (Originally, "Top: 0; Left: 1.8; Right: 0; Bottom: 0; height: 100%; width: 97%;" worked, but now it doesn't with the new layout.) (So I know there should be a way to do it with just one style for all the li elements instead of having to having varying styles for each li element.)
Also, now that I recall, after I added the flex item to contain the UL and added the flex item to the flex container, I had to change my background-size: 100%; to background-size: 100% 100%;
to get it to fit all the words on the image and not go outside the image.
As for the scrolls, for some reason, the only ones I can get to show up, other than using overflow: scroll; is overflow: auto; for body, and that only shows the x-scroll if you scroll to the very bottom. (Interestingly, the y-scroll seems to be working fine.) Applying overflow: auto; to #container doesn't appear to work.
I've got a complex SVG that is the floor plan of a building. I'd like to create modal windows or popups that provide a small description of the different rooms in the building.
The question: how do I add a boostrap modal (or other popup) on click of a or inside the SVG? I've tried adding the modal code within a tag but that doesn't seem to be working.
<rect data-toggle="modal" data-target="#section-h-modal" id="section-h" x="112.6" y="31.4" class="mapsvg-region" width="35.2" height="69.3" style="vector-effect: non-scaling-stroke; fill: rgb(0, 125, 186);">
<foreignobject class="node" x="46" y="22" width="100" height="100">
<div id="section-h-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</foreignobject>
You have used wrong tag to trigger the Modal Know more about
foreignObject
Click Here
and your solution is
here
<svg>
<g>
<a xlink:href="#" class="btn-cta" >
<rect data-toggle="modal" data-target="#section-h-modal" id="section-h"
x="112.6" y="31.4" class="mapsvg-region" width="35.2" height="69.3"
style="vector-effect: non-scaling-stroke; fill: rgb(0, 125, 186);" >
</rect>
</a>
</g>
</svg>
<div class="overlay">
<div class="modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button class="close-btn">x</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
CSS
.btn-cta {
width: 120px;
display: block;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
background: #ccc;
color: #555;
text-decoration: none;
transition: all 0.2s ease-in-out;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
margin-top: -10%;
justify-content: center;
align-items: center;
pointer-events: none;
opacity: 0;
transition: all 0.5s cubic-bezier(0.59, -0.17, 0.3, 1.67);
}
.overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.modal {
transform: translate(0px, -50px);
transition: all 0.7s cubic-bezier(0.59, -0.17, 0.3, 1.67);
position: relative;
padding: 30px;
width: 400px;
background-color: #ddd;
color: #231D23;
text-align: center;
overflow: hidden;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.4);
}
.modal .close-btn {
position: absolute;
padding: 3px 9px;
font-size: 24px;
text-align: center;
background: #ccc;
color: #9c9c9c;
top: -1px;
right: 0;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
JQuery
$(function () {
$('.btn-cta').click(function () {
$('.overlay').addClass('is-open');
return false;
});
$('.close-btn').click(function () {
$('.overlay').removeClass('is-open');
});
});
In most libraries, e.g., bootstrap or materialize, you can open modal dialogs via JavaScript codes. For this reason, please read their examples to find out, how to open it.
To allow click events on your svg elements, you have to know, that each of the svg elements is an ordinary dom element. That means, you can access it like a p tag or something similar.
For example, you have a circle in your svg with id circle01. To add an on-click-event, you can use:
$("#circle01").click(function (e) { ... });
via jQuery or
document.getElementById("circle01").onclick = function (e) { ... };
via pure JavaScript.
To understand the magic of svg, you have to know, that it is pure html ;)
I have a SharePoint site, I want all the buttons to be in center and visible, but some of them are out of borders, I replaced my file Default.aspx with another from site with buttons(I also copied Image folder and all files I need). But in my site all buttons are placed very left and I want them to be in center.
What can I do?
For example this is code of button with phone on it:
<tr>
<td width="181" height="120" rowspan="1" colspan="1" style="padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px">
<div class="mosaic-news right">
<div class="mosaic-overlay">
<a href="http://workpoint.company.corp/teams/TEM1/BAT%20IS/Pages/Telephony_rus.aspx" style="display: block">
<img class="teams" src="images/rus/telephony.png" alt=""/>
</div>
<div class="details">
<!-- INNER TEXT -->
<div style="position: absolute; width: 182px; height: 120px">
<p class="sq_section" style="top: 50%;height: 120px; margin-top: 40px;">Fabric phones<br/>and phones</p>
</div>
</a>
<!-- END -->
</div>
</div>
</td>
</tr>
<tr>
I have a simple problem which i cannot figure out. Look at this html code:
<div id="container">
<div id="content">
<div id="menu">
<ul>
<li>pagina's</li>
<li>home</li>
<li>kamers</li>
<li>over ons</li>
</ul>
</div>
<div class="clearfloats"></div>
<div id="cmscontent">
<div id="sidebar">
<ul>
<li>overzicht van de pagina's</li>
<li class="last">pagina toevoegen</li>
</ul>
</div>
<div id="main">
<h1 class="maintitle">
overzicht van de pagina's
</h1>
<div id="maincontent">
sdfsd
</div>
</div>
<div class="clearfloats"></div>
</div>
</div>
</div>
CSS:
#container {
width: 84%;
margin: 0 auto;
}
#content {
margin-top: 50px;
min-width: 1140px;
}
#cmscontent {
background-color: #ffffff;
border: 1px solid #e0e0e0;
padding: 44px 30px 44px 30px;
position: relative;
z-index: 3;
}
#sidebar{
padding: 14px 24px 14px 24px;
width: 306px;
background-color: #f8f8f8;
float: left;
}
#main {
float: left;
margin-left: 80px;
width: 100%;
}
The problem is that the last container: #main, standard is only as wide as the content it has. So i'm obliged to add a fixed width to it (px). The whole point of my design is that i have floating percentual divs so that's a bummer. Adding 100% width or any other number in %, also has problems of its own..
Is there anyone that a solution for me?
Thank you!
http://www.mathijsdelva.be/cms/
I haven't finetuned anything; i only just html'ed for Safari as of the moment.
The problem is that the last container: #main, standard is only as wide as the content it has.
Tried using display: block for #main ?
What are you actually trying to do here? Are you trying to make a flexible design?