CODEWITHSUNDEEP
htmlcss
zkanoca
zkanoca

Reputation: 9918

How to modify font-changer's html code of open journal system?

I am changing open journal system's css codes. On the side bar, there are a few divs which contain some parts. One of those contains three links about changing font size of the page (larger font size-default font size-smaller font size) at the bottom. The links layout was made side-by-side using 

float: left;

Then I made those divs more stylish. I have added the following rules:

border-radius: 8px;
border: 1px solid #aaa;
margin: 10px auto;
background: rgb(254,254,254);

But because of the links' float:left rule, div's height seems not enough. So I have decided to add the line below right after the three links I mentioned before:

<div  style="clear:both"></div>

I have searched any files in entire web site but I could not find where it is. Is somebody knows where I can add that html code after three links?

You can see the image of my current problem. My problem

As you can see on the image buttons/links go out of the borders of the div. I want to add the line above to fix this.

Upvotes: 0

Views: 643

Answers (1)

zkanoca
zkanoca

Reputation: 9918

Hiding oveflow has solved my problem. Thanks CBroe

border-radius: 8px;
border: 1px solid #aaa;
margin: 10px auto;
background: rgb(254,254,254);
overflow:hidden;

Problem has gone away

Another Approach

But I have found another solution eventhough nd_macias says it is an old approach.

I have found the file public_html/lib/pkp/js/fontController.js

Then I have found the following at lines 32 to 35:

smallFontHtml = "<a href='javascript:void(0);' class='smallFont' title='" + minCaption +"'>" + minCaption + "</a> ";
defFontHtml = "<a href='javascript:void(0);' class='defaultFont' title='" + defCaption +"'>" + defCaption + "</a> ";
largeFontHtml = "<a href='javascript:void(0);' class='largeFont' title='" + maxCaption +"'>" + maxCaption + "</a> ";
$(container).html(smallFontHtml + defFontHtml + largeFontHtml);

Then modified it to the below:

smallFontHtml = "<a href='javascript:void(0);' class='smallFont' title='" + minCaption +"'>" + minCaption + "</a> ";
defFontHtml = "<a href='javascript:void(0);' class='defaultFont' title='" + defCaption +"'>" + defCaption + "</a> ";
largeFontHtml = "<a href='javascript:void(0);' class='largeFont' title='" + maxCaption +"'>" + maxCaption + "</a> ";
clearFix = "<div style='clear:both;'></div>";
$(container).html(smallFontHtml + defFontHtml + largeFontHtml + clearFix);

This can be dealed as another solution.

Upvotes: 1

Related Questions