Every time I try to replace the site-title with a banner image, the formatting messes up and goes wonky. Usually all the links that should be aligned at the bottom of the header float up to the top and get messed up, has anyone encountered this before and know how to fix it?
Here is the header I am using:
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("FantasiTrade", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Browse Units", "", new { area = "", controller = "Units"})</li>
#{ if (User.Identity.Name != null) { if (User.Identity.Name != ""){
<li>#Html.ActionLink("Sell Unit", "Create", new { area = "", controller = "ActiveTrades" })</li>
<li>#Html.ActionLink("Your Profile", "profile", new { user = User.Identity.Name, area = "", controller = "ActiveTrades"})</li>}}}
</ul>
</nav>
</div>
</div>
</header>
I want the "menu" list of links to stay aligned at the bottom of the header rather than floating to the top when I replace:
<p class="site-title">#Html.ActionLink("FantasiTrade", "Index", "Home")</p>
With:
<img src = "mybanner.jpg" />
Thanks to anyone that can help me out!
CSS as requested, I THINK these are the relevant parts, the actual file is massive, let me know if you want to see it all:
/* site title
----------------------------------------------------------*/
.site-title {
color: #000000;
font-family: "Franklin Gothic Medium", Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 3em;
margin: 0px;
margin-left: 25px;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #000000;
outline: none;
text-decoration: none;
}
/* login
----------------------------------------------------------*/
#login {
display: block;
font-size: .85em;
margin: 0 0 10px;
text-align: right;
}
#login a {
background-color: #d3dce0;
margin-left: 10px;
margin-right: 3px;
padding: 2px 3px;
text-decoration: none;
}
#login a.username {
background: none;
margin: 0;
padding: 0;
text-decoration: underline;
}
#login ul {
margin: 0;
}
#login li {
display: inline;
list-style: none;
}
/* menu
----------------------------------------------------------*/
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
}
ul#menu li a {
background: none;
color: #999;
text-decoration: none;
}
ul#menu li a:hover {
color: #333;
text-decoration: none;
}
try <img src = "mybanner.jpg" /> it migth also be an unclosed tag somewhere although your header looks clean apart from unclossed double quotes.
Related
I just dowloaded the newset version of gembox document in order to convert ah html file into PDF.
It seems to be working, but the resulting PDF is losing some information.
Here is what the HTML looks like:
<html>
<head>
<style>
.main-container {
width: 383.62px;
height: 576.95px;
text-align: center;
padding: 96px 48px;
font-family: Verdana;
}
.code {
font-size: 25px;
font-weight: bold;
letter-spacing: 1px;
}
.mrg-btm {
margin-bottom: 8px;
}
.name-and-code {
font-size: 24px;
font-weight: bold;
letter-spacing: 3px;
}
.flex-div {
display: flex;
flex-direction: row;
width: 100%;
}
.distance-one {
width: 50%;
text-align: left;
font-size: 14px;
}
.distance-two {
width: 50%;
text-align: right;
font-size: 14px;
}
.font-bold {
font-weight: bold;
}
.scadenza {
font-size: 24px;
font-weight: bold;
letter-spacing: 3px;
}
.data-scadenza {
font-size: 24px;
font-weight: bold;
letter-spacing: 2px;
}
.materiali {
font-size: 24px;
font-weight: bold;
text-align: left;
letter-spacing: 5px;
}
.last-codes {
display: flex;
flex-direction: row;
font-size: 14px;
text-align: left;
font-family: TimesNewRoman;
}
.mrg-btm-two {
margin-bottom: 64px;
}
.mrg-btm-three {
margin-bottom: 16px;
}
.mrg-btm-four {
margin-bottom: 20px;
}
.mrg-rgt-one {
margin-right: 20px;
}
.mrg-rgt-two {
margin-right: 8px;
}
.mrg-rgt-three {
margin-right: 16px;
}
</style>
</head>
<body>
<div class="main-container">
<div class="code mrg-btm">
<label>STM0583A0</label>
</div>
<div class="name-and-code mrg-btm-four">
<label>TUNISI 0583</label>
</div>
<div class="mrg-btm-four">
<img alt='Barcode Generator TEC-IT'
src='https://barcode.tec-it.com/barcode.ashx?data=02329747&code=Code39'/>
</div>
<div class="flex-div mrg-btm">
<label class="distance-one">SqA</label>
<label class="distance-two font-bold">2481m (#13)</label>
</div>
<div class="flex-div mrg-btm-three">
<label class="distance-one">GOMSET1 (#2)</label>
<label class="distance-two">11/10/2022</label>
</div>
<div class="scadenza mrg-btm">
<label>Scadenza</label>
</div>
<div class="data-scadenza mrg-btm">
<label>31/10/2022</label>
</div>
<div class="materiali mrg-btm">
<label>Materiali</label>
</div>
<div class="last-codes mrg-btm-two">
<label class="mrg-rgt-one">RC1812</label>
<label>000331799805</label>
</div>
<div class="last-codes mrg-btm">
<label class="mrg-rgt-two">SB00040A0</label>
<label class="mrg-rgt-two">STR1026420</label>
<label>25/10/2022</label>
</div>
<div class="last-codes">
<label class="mrg-rgt-two">C-1812</label>
<label class="mrg-rgt-three">RC1812</label>
<label>000331799805</label>
</div>
</div>
</body>
</html>
Here is the c# code. I tried several methods but none of them work.
GemBox.Document.ComponentInfo.SetLicense("FREE-LIMITED-KEY");
DocumentModel document = DocumentModel.Load(filenameHtml);
document.Save(path + pdfFilename);
//CODE 2
GemBox.Document.ComponentInfo.SetLicense("FREE-LIMITED-KEY");
string body = File.ReadAllText(filenameHtml);
var htmlLoadOptions = new HtmlLoadOptions();
using (var htmlStream = new MemoryStream(htmlLoadOptions.Encoding.GetBytes(body)))
{
var document = DocumentModel.Load(htmlStream, htmlLoadOptions);
document.Save(path + pdfFilename);
}
I tried also setting up some parameters, but in every test, the size of the area of the HTML was lost, the Times New Roman font as well, and also the flex div spacing some elements.
Here is what the original xml looks like:
And here is the result
What can I change to make the Gembox Document output look like the original?
I have an unordered list in my sidebar navigation and added icons in the left but the list item object seems without alignment in the left due to the icons different sizes.
Here's my example:
And here what I want:
Here the code:
HTML(with ASP.Net MVC elements):
<div class="wrapper">
<div class="sidebar text-light bg-primary-darker">
<ul>
<li><a asp-action="Info" asp-controller="Dashboard"><i class="fas fa-home"></i>Home</a></li>
<li><a asp-action="Invoices" asp-controller="Dashboard"><i class="fas fa-file-invoice-dollar"></i>Invoices</a></li>
<li><a asp-action="Customers" asp-controller="Dashboard"><i class="fas fa-user-friends"></i>Customers</a></li>
<li><a asp-action="Settings" asp-controller="Dashboard"><i class="fas fa-cog"></i>Settings</a></li>
</ul>
</div>
</div>
CSS:
.wrapper {
margin-top: -1px;
position: relative;
z-index: 1;
}
.wrapper .sidebar {
position: fixed;
width: 15%;
height: 100%;
background-color: #016fe6;
padding: 50px 0;
font-size: 22px;
}
.wrapper .sidebar ul {
display: flex;
flex-direction: column;
padding-inline-start: 10px;
}
.wrapper .sidebar li {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
list-style-type: none;
margin: 10px;
height: 100%;
}
.wrapper .sidebar li a {
text-decoration: none;
display: block;
color: #fff;
padding-left: 15px;
}
.wrapper .sidebar li a i {
margin-right: 15px;
}
.wrapper .sidebar li a:hover{
color: rgb(189, 204, 204);
}
I'm using Bootstrap 4 also.
Because you are using font awesome you can add fa-fw to them.
More info Fixed Width Icons
I am new to nopcommerce,I understood all the basic code flow of nopcommerce.So Now i started replicating plugins (widgets).I created a plugin can install and uninstall but no idea how to create a widget and add it commonly in all pages.what i am trying to achieve is call the iframe component inside the chat bar.I'll add the code of view in this question
Now i added this code in nop.web/shared/_root.cshtml. So now chat bar comes in all pages
<div>
<a class="float" id="button" onclick="openForm()">
<img src="~/files/chatbotv4/VertChat.png" class="my-float">
</a>
<div class="chat-popup" id="myForm">
<div class="chathead">
<div class="btn-close">
<button type="button" class="close" onclick="closeForm()">_</button>
</div>
<div class="btn-max" id="max">
<div type="button" class="fa fa-window-maximize" style="background-color:#16c886; font-size:21px;" onclick="max_chat()">□</div>
</div>
<div class="btn-min" id="min">
<div type="button" class="fa fa-window-restore" style="background-color:#16c886; font-size:21px;" onclick="min_chat()">❐</div>
</div>
</div>
<iframe src='~/files/chatbotv4/botchat.html?name=#customerName&id=#customerId' style='min-width: 100%; width: 100%; min-height: 100%;'></iframe>
</div>
</div>
<script>
function openForm() {
document.getElementById("myForm").style.display = "block";
document.getElementById("button").style.display = "none";
document.getElementsByClassName("header")[0].style.zIndex = "0";
document.getElementsByClassName("header-menu")[0].style.zIndex = "0";
document.getElementsByClassName("footer-lower")[0].style.zIndex = "-1";
//$(".header").css("csstext", " z-index: 0 ;");
//$(".header-menu").css("csstext", " z-index: 0;");
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
document.getElementById("button").style.display = "block";
document.getElementsByClassName("header")[0].style.zIndex = "1";
document.getElementsByClassName("header-menu")[0].style.zIndex = "1";
document.getElementsByClassName("footer-lower")[0].style.zIndex = "1";
}
function max_chat() {
document.getElementById("max").style.display = "none";
document.getElementById("min").style.display = "block";
// $(".chat-popup").css("cssText", " width: 50%;");
document.getElementsByClassName("chat-popup")[0].style.width = "50%";
}
function min_chat() {
document.getElementById("min").style.display = "none";
document.getElementById("max").style.display = "block";
document.getElementsByClassName("chat-popup")[0].style.width = "30%";
}
</script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
/* The popup chat - hidden by default */
.chat-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 1;
height: 100%;
width: 30%;
}
iframe {
background-color: white;
min-height: 95% !important;
min-width: 100%
}
.btn-close {
padding-left: 95%;
position: absolute;
z-index: 1032;
}
.close {
background: transparent;
border: none;
}
.float {
position: fixed;
width: 60px;
height: 60px;
bottom: 20px;
right: 20px;
background-color: #0C9;
//color:#FFF;
border-radius: 50px;
text-align: center;
box-shadow: 2px 2px 3px #999;
z-index: 1030;
}
.my-float {
margin-top: 1px;
margin-left: auto;
height: 58px;
width: 58px;
}
.btn-max {
padding-left: 87%;
position: absolute;
margin-top: 0.2%;
z-index: 1032;
cursor: pointer;
}
.btn-min {
padding-left: 90%;
position: absolute;
margin-top: 0.2%;
z-index: 1032;
display: none;
cursor: pointer;
}
.chathead {
height: 5%;
width: 100%;
position: relative;
background-color: #16c886;
}
</style>
now i want to add it as a seperate widget.
The widget is a defined area where a developer can inject his/her expected functionality. There are already a lot of widgets define by the core team, one of a good example of the widget plugin is NivoSlider. In your plugin you have to implement IWidgetPlugin and need to define expected viewcomponent name of your plugin at "GetPublicViewComponent" method and the name of the widget of nopcommerce at "GetWidgetZones" method where you want to show the viewcomponent at a public site. If you want to know more about the widget plugin, you can visit DEVELOP AND UNDERSTAND WIDGET PLUGIN IN NOPCOMMERCE 4.10 WITH REAL-TIME COMMUNICATION
I have the following code in ASP.net which displays a header and a ListBox:
<div id="divEntMain">
<div class="clsEntMain">
<h3>Entities</h3>
<div class="clsLBHolder">
<asp:ListBox ID="lbEnt" ClientIDMode="Static" runat="server"></asp:ListBox>
</div>
</div>
</div>
The CSS defines the look:
.clsEntMain h3
{
background: #F06600;
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.7);
border-radius: 10px 10px 0 0;
padding: 13px 20px;
font-size: 12px;
text-align: left;
text-transform: uppercase;
}
#divEntMain
{
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#lbEnt
{
width: 100%;
height: 140px;
margin: 0;
padding: 0;
}
Here is the output:
If I modify to this The ListBox moves up just a little bit but I don't want to as the spacing might change based on screen resolution.:
<div style="margin-top: -5px;" class="clsLBHolder">
Why is there a space between the orange H3 and the ListBox?
The default margin for h3 is :
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
To override this, you could
h3{
margin: 0;
}
More info about default properties for html elements here: http://www.w3.org/TR/html-markup/h3.html
I'm not able to align the label and Ajax Rating Control in a single line.
Code is,
<label class="Informlabel" style="font-size: 13px; font-weight: bold; float: left;
width: 100%; overflow: auto; display: block; vertical-align: top;">
Rating :</label>
<asp:Rating ID="Rating1" runat="server" MaxRating="5" CurrentRating="0" CssClass="ratingStar"
StarCssClass="ratingItem" WaitingStarCssClass="Saved" FilledStarCssClass="Filled"
EmptyStarCssClass="Empty" AutoPostBack="false">
</asp:Rating>
Here is the css of Rating tool
li
{
clear:both;
margin-bottom:1em;
border-bottom:1px solid #eee;
}
/* ****************** RatingStar ****************** */
.ratingStar
{
white-space:nowrap;
margin:1em;
height:17px;
vertical-align:top;
}
.ratingStar .ratingItem {
font-size: 0pt;
width: 20px;
height: 16px;
margin: 0px;
padding: 0px;
display: inline-block;
background-repeat: no-repeat;
cursor:pointer;
}
.ratingStar .Filled {
background-image: url(Images/Rating/Selected.gif);
}
.ratingStar .Empty {
background-image: url(Images/Rating/Empty.gif);
}
.ratingStar .Saved {
background-image: url(Images/Rating/Hover.gif);
}
Can you Help me out ??
It's because you have display:block on your label, it should be display: inline-block; same for the output of Ajax Rating Control