Sharepoint. Custom buttons - sharepoint

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>

Related

How to click on the element using the innerText text of a class in Selenium vba

I am willing to get the innerText and click on it. The text is Customer Service Inquiry.
I have tried:
.FindElementsByXPath("//*[text()[contains(.listItem, 'Customer Service Inquiry')]]").Click
This does not work as it gives error that it is not a valid xpath expression
Further, this works but I am wanting to click by what the inner text says.
.FindElementByXPath("//*[#id='listFav_ALLOUTSECURITY0000000000000000008276_APP_P4210_W4210E_PSG0021_20']").click
The html
<div id="listContentHolder"> == $0 > <div class="carolist" id="listOCL" slot="0" style="height: 57px; top: #px;">.</div> > <div class="carolist" id="listRecipts" slot="1" style="height: 57px; top: 57px;">.</div> <div class="caroList" id="listFav" slot="2" style="height: 153px; top: 114px;"> > <div class="listHeader expanded" id="listFavHeader" oncontextmenu="javascript:CARO.updateDropdownMenuView(this,event);jdebebGUIdoToggleSubMenu(this,'caroTabContextMenu', event, true)
;" toplistitem="false">.</div> <div id="listFavouter" class="listContentOuter" style="height: 128px;"> <div id="listFavInner" class="listContentInner" style="height: 128px; top: Opx;">
<div class="listItem" id="listFav_manageFavs" aria-labelledby="appCaption_fav_manageFavs" role="link" tabindex="0" style="user-select: none; top: Opx;">.</div> > <div class="listItem" id="listFav_ALLOUTSECURITY0000000000000000008582_APP_P4210_W4210E_PSG0099_10" aria-labelledby="appCaption_fav_ALLOUTSECURITY0000000000000000008582_APP_P4210_W 4210E_PSG0099_10" role="link" tabindex="0" style="user-select: none; top: 32px;">.</div>
<div class="listItem" id="listFav_ALLOUTSECURITY0000000000000000008276_APP_P4210_W4210E_PSG0021_20" aria-labelledby="appCaption_fav_ALLOUTSECURITY0000000000000000008276_APP_P4210_W 4210E_PSG0021_20" role="link" tabindex="0" style="user-select: none; top: 64px;"> <table class="listItem">
<tbody>
<tr> >
<td class="listIcon">.</td>
<td class="listText">Customer Service Inquiry</td>
</tr>
</tbody>
</table>
</div>
<div class="listItem" id="listFav_21343ad6_1803cf57c8c__7ffeE1PDJAS3__APP_P41026_W41026E_PSA0001_30" aria-labelledby="appCaption_fav_21343ad6_1803cf57c8c__7ffeE1PDJAS3_APP_P41026_ W41026E_PSA0001_30" role="link" tabindex="0" style="user-select: none; top: 96px;">.</div> </div> <a class="panControl up" necessary="false" style></a>
<a class="panControl down" necessary="false" stylex/a> </div> </div> </div>
To click on the element with text as Customer Service Inquiry you can use either of the following locator strategies:
Using FindElementByXPath and only the innerText:
.FindElementByXPath("//td[text()='Customer Service Inquiry']").click
Using FindElementByXPath along with the class and the innerText:
.FindElementByXPath("//td[#class='listText' and text()='Customer Service Inquiry']").click

How to get only rely content(black color) and not included quote(blue color) content using Selenium and Python

I want to know what to get some content not include quote content.
The following url is the target webpage:
https://forumd.hkgolden.com/view.aspx?type=BW&message=7219211
I must use a full xpath to get their content. I want to get black color content and I don't want to get blue content, but when I use the following code. I got blue and blank content together.
content = driver_blank.find_element_by_xpath('/html/body/form/div[5]/div/div/div[2]/div[1]/div[5]/table[8]/tbody/tr/td/table/tbody/tr/td[2]/table/tbody/tr[1]/td/div')
print(content.text)
The following is their html code:
<table width="100%" cellpadding="0" cellspacing="0" style="margin-bottom: 7px;">
<tbody>
<tr>
<td align="left">
<table class="repliers">
<tbody>
<tr hc7uwnfktbez9="" id="XoBTa" userid="461194" username="浅川梨奈">
<td class="repliers_left" style="background-color: #F3F2F1;">
<div>
<a name="275220714"></a>
<a href="javascript: ToggleUserDetail(6, 'XoBTa');" style="font-weight: bold; color: #FF0066;">
浅川梨奈
</a>
<br>
<br>
<div id="ThreadUser6" style="position: relative;">
<a href="/ProfilePage.aspx?userid=461194" style="text-decoration: none;">
<img src="/icons/97.gif" style="border-width: 0px;" alt="Logo">
</a>
<br>
<br>
<img src="/labels/4.gif" style="border-width: 0px;" alt="Member">
</div>
</div>
</td>
<td style="background-color: #F3F2F1; height: 100%; border: solid 1px #111111; vertical-align: top;">
<table class="repliers_right" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top;">
<div class="ContentGrid">
<blockquote><div style="color: #0000A0;">有冇第隻款<img data-icons=":-[lm" src="/faces/lomore/angry.gif" alt=":-[lm"> <img data-icons=":-(lm" src="/faces/lomore/frown.gif" alt=":-(lm"> 我想要呢兩隻</div></blockquote>
<br>
係囉,反應好既會唔會考慮出其他?
<br>
我都想要其他
<img data-icons="^3^lm" src="/faces/lomore/kiss.gif" alt="^3^lm">
<img data-icons="[bomb]lm" src="/faces/lomore/bomb.gif" alt="[bomb]lm">
<br><br><br>
</div>
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: top;">
<div id="lineImage6" style="display: block; overflow: hidden;">
</div>
</td>
</tr>
<tr>
<td style="width: 100%; text-align: right;">
<div style="float: right; vertical-align: bottom; margin-top: 5px;">
<div id="lauming6" style="float: left; vertical-align: bottom;"></div>
<a class="btn btn_small btn_bookmark" href="Javascript:bookmarkThis(7219211)" id="laumingHref">留名</a>
<a class="btn btn_small btn_complain" href="contactus.aspx?messageid=7219211&replyid=275220714">投訴文章</a>
<a class="btn btn_small btn_quote" href="Javascript:QuoteReply(7219211,275220714);">快速引用</a>
<a class="btn btn_small btn_quote" href="post.aspx?mt=Y&rid=275220714&id=7219211&page=2">引用原文</a>
<span style="font-size: 12px; color:gray;">
15/4/2020 13:18
</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I hope to use start-to, not, or contains instruction to finish it.
Can anyone help me? Thanks~~~

SVG Logo with Bootstrap

I am developing a web in Bootstrap 4 and in the header I have a SVG format logo that has to be responsive (without fixed size) but it is not possible to visualize it unless you leave the property wide at a fixed value in .px some way to be responsive without leaving a fixed value in .px? Because in Chrome, Opera, Safari, Internet explorer leaving the Width property in auto. In all browsers it appears without problem but in Firefox it does not
<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="height: 80px; display: flex; align-items: center;">
<a href="index">
<img style="width: 100% !important; height: auto !important;" src="img/imprentaonline24.svg" alt="imprentaonline24" />
</a>
</div>
</div>
It works fine from if use use directly from url. I'm using FireFox and it works
<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="display: flex; align-items: center;">
<a href="index">
<svg>
<img src="https://www.imprentaonline24.es/img/imprentaonline24.svg"/>
</svg>
</a>
</div>
</div>

Equal height children images in responsive Bootstrap 4 columns. How to?

Using Bootstrap 4, I'd like to create 3 columns that adjust their width so that padding of each column is consistent and the height of each image is consistent between each column. The goal is for the width and height of each image to increase/decrease as page width changes. Notice, the height of the images and columns should always be synced. I know I can use percentages, but I was hoping there was a flexbox solution. Thanks
Codepen: https://codepen.io/danielgetsthis/pen/qJgyNx
<div class="container">
<div class="row">
<div class="col">
<a href="#" class="text-center">
<span>1</span>
<img src="http://placehold.jp/100x100.png" />
</a>
</div>
<div class="col">
<a href="#" class="text-center">
<span>2</span>
<img src="http://placehold.jp/200x100.png" />
</a>
</div>
<div class="col">
<a href="#" class="text-center">
<span>3</span>
<img src="http://placehold.jp/300x100.png" />
</a>
</div>
</div>
</div>
I'm not sure that I understand the height issue. The columns and images are the same height. To equalize the padding around the images use col-auto instead of col. This makes the columns shrink to fit the width of their content.
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<a href="#" class="text-center">
<span>1</span>
<img src="http://placehold.jp/100x100.png" />
</a>
</div>
<div class="col-auto">
<a href="#" class="text-center">
<span>2</span>
<img src="http://placehold.jp/200x100.png" />
</a>
</div>
<div class="col-auto">
<a href="#" class="text-center">
<span>3</span>
<img src="http://placehold.jp/300x100.png" />
</a>
</div>
</div>
</div>
https://www.codeply.com/go/XtNGjb765u
body{
background-color: #eee;
box-sizing: border-box;
}
.col {
display: flex;
flex: 0;
flex-direction: initial;
}
.col a {
display: flex;
flex-wrap: wrap;
padding: 10%;
background-color: tomato;
border: 1px solid green;
color: #FFF;
font-size: 26px;
justify-content: center;
}
span{
display: block;
text-align:center;
}

Applying css to a Web Content Display Portlet in Liferay

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

Resources